javascript - 将多个文件上传到 Firebase 存储，当所有上传完成后，订阅 forkJoin

Question

我正在处理需要上传所有文件的上传表单，当所有上传完成后，我想订阅它们并触发下一步操作。

我当前不起作用的实现：

 private uploadImages(): Observable<Subscription> {
const uploadImages$: Subscription [] = [];
this.testResponse.answers.forEach(answer => {
  const filePath = `${answer.selectedImage.name.split('.').slice(0, -1).join('.')}_${new Date().getTime()}`;
  uploadImages$.push(this.testService.uploadPhoto(filePath, answer.selectedImage).subscribe((url: string) => {
      answer.imageUrl = url;
      delete answer.selectedImage;
      delete answer.id;
    }));
});
return forkJoin(uploadImages$);}

  public uploadPhoto(filePath: string, selectedImage?: UploadMetadata): Observable<string | UploadTaskSnapshot> {
return this.storage.upload(filePath, selectedImage).snapshotChanges().pipe(finalize(async () => this.getDownloadUrl(filePath))); }



  public getDownloadUrl(filePath: string): Observable<string> {
return this.storage.ref(filePath).getDownloadURL(); }

1.如何在管道中提供downloadUrl之前“我等待”（finalize（async（）...）？

2.你有更好的使用Angular将文件上传到Firebase的实现吗？

标签： javascriptangularfirebasefile-uploadfirebase-storage

Answer 1

希望这是您想要实现的目标：

forkJoin(uploadImages$).pipe(
  map((photos) => {
    return photos.map(p => p.url);
  }),
  switchMap((photoUrls) => {
    return forkJoin(photoUrls.map(photoUrl => this.getDownloadUrl(photoUrl)));
  })
)
.subscribe((downloadUrls) => {
  console.log(downloadUrls);
});