多个firebase图像上传的问题答案

【问题标题】：Trouble with multiple firebase image upload with progress多个firebase图像上传的问题
【发布时间】：2021-05-12 10:10:13
【问题描述】：

我正在尝试一次将多张图片上传到 Firebase。它正在这样做，但是这些云图像链接的返回 url 数组为时已晚，因为帖子已经使用空数组发送。这是我的代码：

// uploading media files using promises
  async uploadMedia(mediaFile: string){
      const extension = mediaFile.split('.')[mediaFile.split('.').length - 1];
      const mediaFileName = `${Math.round(Math.random()*100000000000)}.${extension}`;
      this.uploadProgress = 0;
      const response = await fetch(mediaFile);
      const blob = await response.blob();
      const storageRef = storage.ref(`${mediaFileName}`).put(blob);
      return storageRef.on(`state_changed`,snapshot=>{
        this.uploadProgress = (snapshot.bytesTransferred/snapshot.totalBytes);
      }, error=>{
        this.error = error.message;
        this.submitting = false;
        this.uploadingMedia = false;
        return;
      },
      async () => {
        // check whether the media is an image or a video and add to correct arrays
        if(extension == "png" || extension == "jpg"){
          return storageRef.snapshot.ref.getDownloadURL().then(async (url)=>{
            this.firebaseImageUrls = [...this.firebaseImageUrls, url];
            return;
          });
        }
        else{
          return storageRef.snapshot.ref.getDownloadURL().then(async (url)=>{
            this.firebaseVideoUrls = [...this.firebaseVideoUrls, url];
            return;
          });
        }
      });
  }

调用所有内容的地方：

await Promise.all(this.props.store.selectedImagesArray.map(async (file:string) => {
        await this.uploadMedia(file);
      }))
this.submitPost(); // this submits everything with the firebaseImageUrls

感谢任何帮助

【问题讨论】：

标签： javascript node.js firebase promise firebase-storage

【解决方案1】：

问题似乎是storageRef.on() 没有返回承诺。它只是注册处理程序。我不是firebase方面的专家。也许put(blob) 返回一个你可以使用的承诺。

【讨论】：

是的，这是真的。但是我不知道如何表示图像上传的进度，因为我必须引用.put（blob）。顺便说一句，这很有效，我也只需要上传状态。

【解决方案2】：

想通了。我必须做出承诺并解决每个上传任务的承诺，然后遍历所有执行此操作的文件。然后当所有文件完全上传并且循环完成时，我可以提交带有firebaseImageUrls中的文件的帖子。

async uploadMedia(mediaFile: string){
    return new Promise(async (resolve, reject) => {
      //making the uploading task for one file
      const extension = mediaFile.split('.')[mediaFile.split('.').length - 1];
      const mediaFileName = `${Math.round(Math.random()*100000000000)}.${extension}`;
      const response = await fetch(mediaFile);
      const blob = await response.blob();
      const storageRef = storage.ref(`${mediaFileName}`);
      const task = storageRef.put(blob);

      task.on(`state_changed`,snapshot=>{
        this.uploadProgress = (snapshot.bytesTransferred/snapshot.totalBytes);
      }, error=>{
        this.error = error.message;
        this.submitting = false;
        this.uploadingMedia = false;
        return;
      },
      async () => {
        if(extension == "png" || extension == "jpg"){
          task.snapshot.ref.getDownloadURL().then((url:any)=>{
            console.log(url);
            resolve(url);
          });
        }
        else{
          task.snapshot.ref.getDownloadURL().then((url:any)=>{
            console.log(url);
            resolve(url);
          });
        }
      });
    })
  }

循环：

for(var i = 0; i < this.props.store.selectedImagesArray.length; i++){
        const imageUrl = await this.uploadMedia(this.props.store.selectedImagesArray[i]);
        this.firebaseImageUrls = [...this.firebaseImageUrls, imageUrl];
}
this.submitPost();

【讨论】：