Question

此功能可将图像数组发布到Firebase存储中，并获取URL将其发布到Firebase数据库中。

uploadImages(images, callBack) {
    this.uploadedImages = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      imagesURI.putString(images, "data_url").then(() => {
        imagesURI.getDownloadURL().then(url => {
          console.log(url);
          this.uploadedImages.push(url);
          console.log(this.uploadedImages);
        });
      });
    }
    callBack(this.uploadedImages);
  }

在这种情况下如何使用Promise.all？

Answer 1

putString和getDownloadURL都返回一个承诺，因此您可以将它们冒泡，然后将它们添加到Promise.all的数组中。

uploadImages(images, callBack) {
    let promises = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      let promise = imagesURI.putString(images, "data_url").then(() => {
          return imagesURI.getDownloadURL();
        })
      promises.push(promise);
    }
    Promise.all(promises).then(function(urls)
      this.uploadedImages = urls;
      callBack(this.uploadedImages);
    });
}

请注意，我仅着重于上载完成时使用promises进行捕获。代码中可能还有其他错误。

正如Bergi所说，您还可以通过返回promise来代替回调：

uploadImages(images, callBack) {
    let promises = [];
    for (let index = 0; index < images.length; index++) {
      const imagesURI = storage()
        .ref("images/")
        .child(this.uid())
        .child(index + "");
      let promise = imagesURI.putString(images, "data_url").then(() => {
          return imagesURI.getDownloadURL();
        })
      promises.push(promise);
    }
    return Promise.all(promises)
}

您可以通过以下方式调用它：

uploadImages(imageArray).then(function(downloadUrls) {
  console.log(downloadUrls);
})

Answer 2

您的uploadImages函数使用promise数组调用回调函数。

您只需将回调函数传递给“ uploadImages”，然后将返回的数组或Promise.all使用promises。

uploadImages(images, promises => {
  Promise
    .all(promises)
    .then(results => { 
      //do something with 
    })
    .catch(error => {
      // handle error
    })
})

imagesURI在此情况下许诺了如何使用promise.all

2 个答案: