Несколько наблюдаемых RxJ, испускаемых из FileReader - собираются как массив

Question

Я создаю файловую платформу и столкнулся с проблемой при чтении файлов Blob из API FileReader. Поток кода: получать файлы от пользователя в службе загрузки в виде наблюдаемого массива и генерировать строку 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)
    })
  }

После разрешения каждого из файлов внутри forof он будет 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);
  }