在本机反应中从数组上传数据到 Firebase 存储和 Firebase 数据库

Posted 2023-02-23

【中文标题】在本机反应中从数组上传数据到 Firebase 存储和 Firebase 数据库

【英文标题】：Upload data to firebase storage and Firebase database from array in react native

【发布时间】：2019-08-29 17:07:03

【问题描述】：

我有一个数组，其中包含一些图像的本地位置，如下所示。

图像路径= ["file:///data/user/0/com.app.taamoutlet/cache/react-native-image-crop-picker/22536474236950.png","file:///data/user/0/com. app.taamoutlet/cache/react-native-image-crop-picker/22583225016770.png "]

我已经上传了一张图片。 根据您在下面看到的代码，我想将图像上传到 Firebase 存储。我想将数组中的每个图像上传到一个文件夹。然后收集可下载的 URL 和每张图片，并将该信息存储在您所看到的单个产品下

      () => 
        const fs = RNFetchBlob.fs
        const uid = "flyers/" + this.state.productUid;
        const imageRef = firebase.storage().ref(uid).child(Math.random()+".jpg") //string "dp1.jpg"
        let mime = 'image/jpg'

        //------------------------------------------------
        // coverting to base64
        fs.readFile(this.state.imagePath, 'base64')
          .then((data) => 

            //console.log('data='+data);
            return Blob.build(data,  type: `$mime;BASE64` )
          )
          .then((blob) => 
            //uplaoding Image
            uploadBlob = blob
            return imageRef.put(blob,  contentType: mime )
          )
          .then(() => 
            uploadBlob.close()
            //getting url
            return imageRef.getDownloadURL()
          )
          .then((url) => 
            urls = url;
            console.log('urls=' + urls)
            //================================
            try 


              alert("Uploading Flyer" + this.state.title)

              //-------------------------------------------

              //----------Inserting Data to Database--------


              usersTable = 'flyers/' + this.state.productUid,
                console.log(usersTable)
              firebase.database().ref(usersTable).set(
                

                  title: this.state.title,
                  description: this.state.description,
                  imageUrls: url,
                  storename: this.state.storename,
                  user: asyncValue,
                  longitude: this.state.longitude,
                  latitutde: this.state.latitutde
                
              ).then(

                alert(this.state.title + " flyer sucessfully uploaded")
              )
              //--------------------------------------------

            
            catch (error) 
              this.setState( loading: false )
              this.setState( disabled: false )
              console.log(error.toString())
              alert(error.toString())
            
            //================================



          )
      

【问题讨论】：

你必须和Promise.all()“玩”，见developer.mozilla.org/en-US/docs/Web/javascript/Reference/…。在每个then()s 中，您必须管理Promise.all() 返回的结果数组并构建一个新数组以传递给下一个Promise.all()

【参考方案1】：

正如 Renaud 所说，您必须使用 Promise.all。请查看此示例：

const promises = [fs.readFile(this.state.imagePath, 'base64'),...];

return Promise.all(promises).then((arrayOfResults) => 
  const furtherPromises = [...]

  return Promise.all(furtherPromises)
    .then((uploadedFiles) => 
      // action required
  )
    .catch((error) => 
      // action required
    );
  ).catch((error) => 
   // action required
);