使用 Firebase 实时数据库和 React 将图像上传给用户

IT技术 reactjs firebase firebase-realtime-database
2021-05-23 12:47:22

是否可以将图像上传到数据库中的用户而不是存储中。我目前正在构建注册并允许将图像添加到配置文件并将这些图像存储在您的 UID 中。目前所有的数据都保存了,期待图片或图片网址。关于如何处理或这是否是解决此问题的正确方法的任何想法?

我的数据库中的 JSON 方案:

    {
  "users" : {
    "3pwcQ0VuzogVmmQ97yDExkMac1m1" : {
      "Email" : "greg@gmail.com",
      "code" : "bob",
      "image" : "",
      "location" : "fl"
    }
  }
}

reactJS:

    state = {
    email: '',
    password: '',
    code: 'bob',
    location: 'fl',
    image: null,
    url: '',
    error: null,
  };


  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      this.setState(() => ({image}));
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password, image } = this.state;
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on('state_changed', () => {
      // complete function ....
      storage.ref('images').child(image.name).getDownloadURL().then(url => {
          console.log(url);
          this.setState({url});
      })
    });

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((user) => {
        firebase
        .database()
        .ref('users/' + user.user.uid)
        .set({
          Email: user.user.email,
          code:  this.state.code,
          location:  this.state.location,
          image:  this.state.url
        })
        this.props.history.push('/');
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  };
1个回答

我认为您应该使用 firebase 存储。这样您就可以存储实际图像。

检查此链接:https : //firebase.google.com/docs/storage/