angular - 循环上传文件不起作用

Question

我正在尝试在 Angular 中创建(多)文件上传。我希望用户选择一个或多个文件，调用我的后端来获取 Azure Blob 存储的共享访问签名，然后将文件从客户端上传到 Azure 存储。

我的问题是，选择文件后我想循环遍历所选文件并调用每个文件的上传过程。

onFileChange(event: any): void {
  this.filesSelected = true;
  this.uploadProgress$ = from(event.target.files as FileList).pipe(
    map(file => this.uploadFile(file)),
    combineAll()
  );
}

我在此处的示例中找到了上面的代码:https://medium.com/@stuarttottle/upload-to-azure-blob-storage-with-angular-7977e979496a这似乎是一个很好的解决方案。我调整了代码，以便为每个文件检索一个 SAS，并保留其他所有内容。我的问题是 map 没有归档。我选择一个或多个文件并不重要。调试显示所选文件确实到达(event.target.files 实际上是包含所选文件的 FileList)，但映射运算符根本不触发。检查代码我找不到问题。也许你们可以帮忙;)

[编辑] 在评论中添加了 uploadFile 请求

uploadFile(file: File): Observable<IUploadProgress> {
  return this.picturesService.acquireSas(file.name).pipe(
    flatMap(sas => {
      const accessToken: ISasToken = {
        container: sas.containerName,
        filename: file.name,
        storageAccessToken: sas.valetKeySecret,
        storageUri: sas.storageUrl
      };
      return this.blobStorage
        .uploadToBlobStorage(accessToken, file)
        .pipe(map(progress => this.mapProgress(file, progress)));
    })
  );
}

[/编辑]

Answer 1

你所做的一切都很好。您只需要订阅可观察的即可。

像this.uploadProgress$.subscribe();

工作示例 here .

您可以了解rxjs@learnrxjs.io