Angular RxJs从FileReader发出的多个观察值-收集为数组

我正在构建一个filedrop平台，在从FileReaderAPI读取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)
    })
  }

目前的结果是什么： 函数发出可观察值的数组长度

预期结果是什么： 根据此界面，该函数将发出一个包含所有对象的单一数组：

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

---

您每次在of表达式的

中都要重新初始化
src
。将此更改为
push

异步getFileList（文件：File[]）{
让src！：IStoryFile[]=[]；//初始化
for（文件常数）{
const blob=等待此消息。readFileBlob（f）
推送（{file:f，src:blob}）；//推送新对象
}
this.uploadSrv.setFilesUpload（src）；
}

您每次都在为of表达式重新初始化

src

。将此更改为

push

异步getFileList（文件：File[]）{ 让src！：IStoryFile[]=[]；//初始化 for（文件常数）{ const blob=等待此消息。readFileBlob（f） 推送（{file:f，src:blob}）；//推送新对象 } this.uploadSrv.setFilesUpload（src）； }

---

能否尝试使用mergeMap操作符组合所有观察到的响应？我不确定我是否理解原因/方式。mergeMap通常用作promises中的

.then（）

方法。您能否尝试使用mergeMap运算符组合所有可观察的响应？我不确定我是否理解原因/方式。mergeMap通常用作promises中的

.then（）

方法。有时最明显的问题是最难找到的：-）谢谢你，朋友！有时候最明显的问题，最难发现：-）谢谢你，朋友！

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