Question

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

<croppa v-for="(c, i) in croppas"
  :key="i"
  v-model="croppas[i]"
  :width="150"
  :height="150"
  @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仅适用于一个文件，其中可能会有更多文件。我如何使它与数组一起工作？

Answer 1

第二个问题.....

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

因此，在您的循环中调用与下面类似的方法（我刚刚从我的一个项目中抓取了这个方法）：

goto /?

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

1 个答案: