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，而其他所有内容均保持不变。我的问题是地图没有归档。选择一个或多个文件都没有关系。调试显示选定的文件确实确实到达了（event.target.files实际上是带有选定文件的FileList），但是map运算符根本不会触发。查看代码，我找不到问题。也许你们可以帮忙;）

[编辑] 在评论中添加了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)));
    })
  );
}

[/ edit]

Answer 1

如何通过数组映射呢？

this.arrayOfUploadProgress = [...event.target.files]
  .map(file => this.uploadFile(file));
forkJoin(this.arrayOfUploadProgress).subscribe(response => console.log(response));

Answer 2

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

像this.uploadProgress$.subscribe();

工作示例here。

您可以了解有关{@ {3}}的rxjs

循环浏览文件无法上传

2 个答案: