Firebase 存储上传多个文件并一次获取它们的下载 URL答案

【问题标题】：Firebase storage upload multiple files and got their download URLs at onceFirebase 存储上传多个文件并一次获取它们的下载 URL
【发布时间】：2021-03-21 22:47:45
【问题描述】：

我想使用 Firebase Firestore 上传多个文件并一次获取它们的下载 URL，我就是这样做的。

 const promises = [];

    imgFileList.forEach((file, index) => {
      const uploadTask = storage.ref(`instagram/${file.name}`).put(file);
      promises.push(uploadTask);
      uploadTask.on(
        'state_changed',
        (snapshot) => {},
        (err) => alert(err.code),
        async () => {
          const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
          console.log(downloadURL, index);
        }
      );
    });

    Promise.all(promises)
      .then(() => {
        console.log(uploadedMediaList, 'all');
      })
      .catch((err) => alert(err.code));

这就是我得到的

result

如你所见，在上面的代码中，我 Promises.all() 数组 promises 并没有按我预期的顺序返回下载 URL，请告诉我如何处理它，我想获取列表在Promise.all() 的then 块中下载 URL。非常感谢你，我很抱歉我的英语不好。祝你有美好的一天

【问题讨论】：

标签： javascript firebase-storage

【解决方案1】：

当您在存储引用上调用 put 时，它会返回一个承诺。因此，您不需要使用 on 监听器，而是可以在调用 getDownloadURL() 之前等待该承诺解决。

const promises = imgFileList.map((file, index) => {
  let ref = storage.ref(`instagram/${file.name}`);
  return ref.put(file).then(() => ref.getDownloadURL());
})
Promise.all(promises)
  .then((uploadedMediaList) => {
    console.log(uploadedMediaList, 'all');
  })
  .catch((err) => alert(err.code));

【讨论】：