如何将多个图像上传到 Firebase 存储并返回多个下载 URL

Posted 2023-02-22

【中文标题】如何将多个图像上传到 Firebase 存储并返回多个下载 URL

【英文标题】：How to upload multiple images to Firebase Storage and return multiple downloadURLs

【发布时间】：2019-03-24 17:07:43

【问题描述】：

我们正在开发一个简单的电子商务应用，我们需要在其中上传多张产品图片。使用 Vuejs 和 Vue-Croppa，我们需要将图像上传到 firebase 存储，检索下载 URL，然后在我们将该产品添加到数据库时将这些 URL 包含在一个数组中。

<croppa v-for="(c, i) in croppas"
  :key="i"
  v-model="croppas[i]"
  :
  :
  @new-image="croppas.push()"
  v-show="i === croppas.length - 1 || c.imageSet"
></croppa>

还有我们的方法：

addProduct() 
    this.showSuccess = true
    let details = this
    this.croppas.forEach(file => 
        file.generateBlob(
            blob => 
                let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
                let imagesRef = storageRef.child('productimages/' + rand)
                let downloadURL
            imagesRef.put(blob).then((snap) => 
            imagesRef.getDownloadURL().then(function(downloadURL) 
              console.log('File available at', downloadURL)
            )
          )
      ,
        'image/jpeg',
        0.8
        )
    )

    let shop = this.userStore.id
    let details = this
    console.log(shop)
    let createdAt = new Date().toString()
    let createdBy = this.currentUser.uid
    console.log(createdBy)
    let productImageUrl = downloadURL

    fb.productsCollection.add( details, createdAt, createdBy, shop)
    .then( doc => 
      fb.productsCollection.doc(doc.id).update(
        id: doc.id, 
      )
   )
   .then( doc => 
      fb.productsCollection.doc(doc.id).update(
        productImages: productImageUrl
      )
   )

   setTimeout(() => 
    this.showSuccess = false
   , 4000)
,

现在，我们得到一个控制台错误：

Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or File.

此外，productImageUrl = downloadURL 仅适用于一个文件，可能会有更多文件。我怎样才能使这个与数组一起工作？

【参考方案1】：

关于你的第二期.....

为您要上传的每张图片设置一个承诺。

所以在你的循环中调用一个“类似于”下面的方法（我刚刚从我的一个项目中提取了这个）：

uploadImageAsPromise (imageFile) 
    const self = this;

        return new Promise(function (resolve, reject) 
            var storageRef = firebase.storage().ref("/imagestestnew/"+imageFile.name);

            //Upload file
            var task = storageRef.put(imageFile);


            //Update progress bar
            task.on('state_changed',
                function progress(snapshot)

                    var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                    console.log("percentage" + percentage)
                    self.progressUpload = percentage;
                ,
                function error(err)
                    console.log("error")
                ,
                function complete()
                    console.log("done")
                    var downloadURL = task.snapshot.downloadURL;
                
            );
        );