将多个文件上传到 Firebase 存储问题

Question

我正在开发一个以 firebase 为后端的烹饪 android 应用程序，我需要在 firebase stoarge 中上传多个食谱图像，然后将下载网址存储到 firebase 数据库中。

我设法将文件上传到 firebase，但在获取这些文件的 downloadUrl 时遇到了一些麻烦。 我已经创建了一组承诺来上传文件，并且我已经创建了另一个数组来存储我在完成上传任务时获得的每个文件的 url。

这是我的代码

 var promises = [];
 for (var i=0 ;i< prepaImages.length;i++) 
            {
                //alert(prepaImages[i].name);

              var storageRef = firebase.storage().ref("receipes"+"/"+category+"/"+title+"/"+uploadTime+prepaImages[i].name );
             var uploadTask = storageRef.put(prepaImages[i]);
              promises.push(uploadTask);

              uploadTask.on('state_changed', snapshot => {
              var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                $("#prepaImageUploadprogress").html(Math.round(percentage)+"%");
                $("#prepaImageUploadprogress").attr("style", "width:"+percentage+"%");


                }, error => { alert(error) }, () => {
                    uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                        //prepaImagesUrl+="+"+downloadURL;
                       prepaImagesUrl.push(downloadURL);
                       });
}); 

问题是我得到了一个上传文件数量减一的数组（长度应该等于上传文件的数量）并且它具有相同的值（相同的下载网址） .任何帮助将不胜感激 谢谢。

Answer 1

我认为问题在于承诺。我建议您使用Promise.all 并等待。因此，您的代码将更加可靠。这是我的多文件上传解决方案（适应你的变量名）：

const array = Array.from({ length: prepaImages.length }, (value, index) => index);
const uploadedImages = await Promise.all(array.map(async index => {
  const image = prepaImages[index];
  const metadata = { contentType: image.type };
  const storageRef = firebase.storage().ref(`receipes/${category}/${title}/${uploadTime}${prepaImages[i].name}`);
  const uploadTask = storageRef.put(image, metadata);
  const url = await new Promise((resolve, reject) => {
    uploadTask.on('state_changed', snapshot => {
      const percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      $('#prepaImageUploadprogress').html(`${Math.round(percentage)}%`);
      $('#prepaImageUploadprogress').attr('style', `width: ${percentage}%`);
    }, error => reject(error),
    async () => {
      const downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();
      resolve(downloadUrl);
    });
  });
  return { name: image.name, url };
}));

uploadedImages 将包含一个包含图像名称和下载 url 的数组。当然，你可以不用等待，但我更喜欢这种方式。

更新： 这是我自己的代码（没有错误处理）来实现这一点，另外，我需要提一下，我将它与 react、redux 和使用 firebase、firestore 包装器用于 redux redux-firestore 和 react-redux-firebase 但这些只是包装器：

export const addNewWork = work => async (dispatch, getState, { getFirebase, getFirestore  }) => {
  const { files, ...restWork } = work;
  const firebase = getFirebase();
  const firestore = getFirestore();
  const storageRef = firebase.storage().ref();
  const array = Array.from({ length: files.length }, (value, index) => index);
  const uploadedFiles = await Promise.all(array.map(async index => {
    const file = files[index];
    const metadata = { contentType: file.type };
    const uploadTask = storageRef.child(`works/${file.name}`).put(file, metadata);
    const url = await new Promise((resolve, reject) => {
    uploadTask.on('state_changed', () => {}, error => reject(error), async () => {
      const downloadUrl = await uploadTask.snapshot.ref.getDownloadURL();
        resolve(downloadUrl);
      });
    });
    return { name: file.name, url };
  }));

  await firestore.collection('works').add({
    ...restWork,
    image: uploadedFiles[0], // Use only one image for the clean example
    createdAt: new Date()
  });
});