RxJs從FileReader發出多個可觀察對象-收集為數組

Question

我正在構建一個Filedrop平台，並且在從FileReader API讀取Blob文件時遇到問題。 代碼流是：以可觀察的數組形式從上載服務中的用戶獲取文件，並從Blob生成base64字符串，以在瀏覽器中顯示。

讀者：

  async getFileList(files: File[]) {
    let src!: IStoryFile[];
    for (const f of files) {
      const blob = await this.readFileBlob(f)
      src = [{ file: f, src: blob }]
    }
    this.uploadSrv.setFilesUpload(src);
  }

  readFileBlob(file: File): Promise<any> {
    return new Promise((resolve, _) => {
      const reader = new FileReader()
      reader.onloadend = (e) => {
        resolve(reader.result)
      }
      reader.readAsDataURL(file)
    })
  }

解決了論壇中的每個文件之后，它將在服務next ，該服務為DOM * ngFor |提供最終數組。 異步循環：

protected files$!: Observable<IStoryFile[]>;
...
this.files$ = this.uploadSrv.getFilesUpload$()
      .pipe(
        tap(val => console.log(val)),
      )

當前結果是什么：函數發出可觀察值的數組長度

預期的結果是什么：該函數將根據此接口發出所有對象的單個數組：

export interface IStoryFile {
  file: File;
  src?: string | ArrayBuffer | null;
}

Answer 1

您每次都在for-of表達式中重新初始化src 。 將其更改為push 。

  async getFileList(files: File[]) {
    let src!: IStoryFile[] = []; // Initialize
    for (const f of files) {
      const blob = await this.readFileBlob(f)
      src.push({ file: f, src: blob }); // Push new object
    }
    this.uploadSrv.setFilesUpload(src);
  }