Angularfire 多次上传

Question

我想上传几张图片，我有如下代码。它 returns 下载 link，但只有一张图片。我怎样才能获得上传图片的 link 列表？

  constructor(private storage: AngularFireStorage, public afs: AngularFirestore, ) {
    this.files = this.afs.collection('files').valueChanges();
  }

  uploadFile(event) {
    // reset the array 
    this.uploads = [];
    const filelist = event.target.files;
    const allPercentage: Observable<number>[] = [];

    for (const file of filelist) {
      const filePath = `${file.name}`;
      const fileRef = this.storage.ref(filePath);
      const task = this.storage.upload(filePath, file);
      const _percentage$ = task.percentageChanges();
      allPercentage.push(_percentage$);

      // observe percentage changes
      this.uploadPercent = task.percentageChanges();

      // get notified when the download URL is available
      task.snapshotChanges().pipe(
        finalize(() => {
          this.downloadURL = fileRef.getDownloadURL();
        })
      ).subscribe();
      // this.downloadURLs.push(this.downloadURL);
    }
  }

uploadFile(files) {
    //console.log(this.uploadService.uploadFile(file));
    this.uploadService.uploadFile(files);
  }

<ion-item>
      <ion-input type="file" (change)="uploadFile($event)" multiple="multiple"></ion-input>
    </ion-item>
    
    <button (click)="onAddItem()" ion-button block>Добавить</button>

Answer 1

简单方法：上传前清除this.downloadURLs，然后在finalize步骤

中添加url

uploadFile(event) {
    // reset the array 
    this.uploads = [];
    this.downloadURLs = [];
    const filelist = event.target.files;
    const allPercentage: Observable<number>[] = [];

    for (const file of filelist) {
      const filePath = `${file.name}`;
      const fileRef = this.storage.ref(filePath);
      const task = this.storage.upload(filePath, file);
      const _percentage$ = task.percentageChanges();
      allPercentage.push(_percentage$);

      // observe percentage changes
      this.uploadPercent = task.percentageChanges();

      // get notified when the download URL is available
      task.snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => { 
            this.downloadURLs = this.downloadURLs.concat([url]);
          });
        })
      ).subscribe();
      // this.downloadURLs.push(this.downloadURL);
    }
  }

Rxjs方式：先合并所有最新结果，然后订阅分配结果。注意：你也可以使用forkJoin

   import { combineLatest, from } from 'rxjs';
   import { map, filter } from 'rxjs/operators';

   ...

      uploadFile(event) {
        // reset the array 
        this.uploads = [];
        const filelist = event.target.files;
        const allPercentage: Observable<number>[] = [];
        const downloadUrls$ = filelist.map((file) => {

          const filePath = `${file.name}`;
          const fileRef = this.storage.ref(filePath);
          const task = this.storage.upload(filePath, file);
          const _percentage$ = task.percentageChanges();
          allPercentage.push(_percentage$);

          // observe percentage changes
          this.uploadPercent = task.percentageChanges();

          // get notified when the download URL is available
          return task.snapshotChanges().pipe(
            filter((task) => task.state === this.storage.TaskState.SUCCESS)
            switchMap(() => from(fileRef.getDownloadURL()))
          )
        });

        combineLatest(...downloadUrls$)
          .subscribe((urls) => this.downloadURLs = urls)
      }

Angularfire 多次上传

Angularfire multiple upload

angularfire2