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

Posted 2023-02-22

【中文标题】使用 Firebase 实时数据库和 React 将图像上传给用户 [重复]

【英文标题】：Upload image to a user using Firebase realtime database and React [duplicate]

【发布时间】：2019-07-11 04:11:08

【问题描述】：

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

我的数据库中的 JSON 方案：

    
  "users" : 
    "3pwcQ0VuzogVmmQ97yDExkMac1m1" : 
      "Email" : "[e-mail]",
      "code" : "bob",
      "image" : "",
      "location" : "fl"
    
  

反应 JS：

    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 );
      );
  ;

【问题讨论】：

存储图像数据的“正确”方式是在 Firestore 存储中。如果您想将图像上传到 Firebase 实时数据库，则需要将图像数据编码为 base64 字符串。见***.com/questions/13955813/…

如何将上传的图片分配给uid？

要将来自 Firebase 存储的图片与 Firebase 实时数据库中的用户配置文件相关联，您通常会将图片的下载 URL 或路径存储在用户配置文件中。由于路径和 URL 都是字符串，因此可以将它们存储在数据库中（仅支持 JSON 类型）。

@FrankvanPuffelen - 我刚刚更新了我的问题。我现在可以保存到存储中，但在我的数据库中为空。有什么想法吗？

您需要在getDownloadUrl() 的回调中写入数据库的 URL。所以你现在打电话给this.setState(url);，也可以打电话给firebase.database().ref('users/' + user.user.uid + '/image').set(url);。

【参考方案1】：

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

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