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

您每次都在src表达式中重新初始化for-of。将其更改为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);
  }