AngularFire Storage：如何等待两张图片上传完成后更新Firestore文档

你可以借助RxJS的forkJoin操作符，同时监听大图和缩略图的上传任务，确保两者都完成后再获取下载URL并更新Firestore文档。修改后的代码如下：

startUpload(results) {
  // 生成图片ID
  const imageId = this.afs.createId();

  // 缩略图上传配置
  const thumbPath = `${path}/${imageId}_small.jpg`;
  const thumbTaskRef = this.storage.ref(thumbPath);
  const thumbTask = this.storage.upload(thumbPath, results.thumb).snapshotChanges();

  // 大图上传配置
  const largePath = `${path}/${imageId}_large.jpg`;
  const largeTaskRef = this.storage.ref(largePath);
  const largeTask = this.storage.upload(largePath, results.original).snapshotChanges();

  // 同时等待两个上传任务完成
  forkJoin([largeTask, thumbTask])
    .pipe(
      switchMap(async () => {
        // 两个任务都完成后，获取各自的下载URL
        const largeImageDownloadURL = await lastValueFrom(largeTaskRef.getDownloadURL());
        const thumbnailImageDownloadURL = await lastValueFrom(thumbTaskRef.getDownloadURL());
        
        return {
          large_url: largeImageDownloadURL,
          small_url: thumbnailImageDownloadURL
        };
      }),
      catchError(error => {
        // 处理上传或URL获取过程中的错误
        console.error('上传失败:', error);
        throw error;
      })
    )
    .subscribe(async (images) => {
      const newDocId = this.afs.createId();
      // 更新Firestore文档
      await this.afs
        .doc(`${path}/${someID}/images/${newDocId}`)
        .set(images, { merge: true });
      
      // 执行后续逻辑
      // ...
    });
}

关键说明： #

• forkJoin([largeTask, thumbTask])：会等待传入的两个Observable（两个上传任务的快照流）都完成后，才触发后续操作，从根源上保证双图上传完成再执行后续逻辑。
• switchMap：将上传完成的事件流转换为获取下载URL的异步操作，确保拿到有效URL后再传递给下一步。
• catchError：统一处理上传或URL获取过程中的错误，避免程序异常崩溃。

内容的提问来源于stack exchange，提问作者user8836786