getDownloadURL 未获取所有网址

Question

我正在将三张照片上传到我的 Firebase 存储，当我尝试使用 getDownloadURL 检索每个图像的 Firebase URL 时，它只返回两个对象而不是三个

        //const uploadedFilesURL = [];
        uploadToStorage.map((image) => {
            const storageRef = ref(storage, `images/${image.name + v4()}`);
            uploadBytes(storageRef, image).then((snapshot) => {
                getDownloadURL(snapshot.ref).then((url) => {
                    //console.log(image);
                    //console.log(url);
                    uploadedFilesURL.push({file: image, url})
                })
            });
        });

        console.log(uploadedFilesURL);

但是，当我 console.log 图像和 URL 时，我得到了三个对象（这是我需要的，但我不想控制台图像）

        const uploadedFilesURL = [];
        uploadToStorage.map((image) => {
            const storageRef = ref(storage, `images/${image.name + v4()}`);
            uploadBytes(storageRef, image).then((snapshot) => {
                getDownloadURL(snapshot.ref).then((url) => {
                    console.log(image);
                    console.log(url);
                    uploadedFilesURL.push({file: image, url})
                })
            });
        });

        console.log(uploadedFilesURL);

我正在尝试获取 firebase URL 路径，以便可以将其存储在单独的数据库中作为参考，这就是我创建一个名为 uploadedFilesURL 的对象的原因。

谢谢！

Answer 1

正如 Doug 评论的那样，您的代码无法等待所有上传和调用

getDownloadURL

完成才能记录结果。解决此问题的最简单方法是使用

Promise.all

:

let promises = uploadToStorage.map((image) =>
  const storageRef = ref(storage, `images/${image.name + v4()}`);
  return uploadBytes(storageRef, image).then((snapshot) => {
    return getDownloadURL(snapshot.ref);
  })
);

Promise.all(promises).then((urls) => {
  console.log(urls);
});

或者（如果您处于

async

环境中）最后一部分：

const urls = await Promise.all(promises);
console.log(urls);