循环上传文件不起作用

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 运算符根本不会触发。查看代码我找不到问题。也许你们可以帮忙;)

[编辑] 在 cmets 中添加了 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

你所做的一切都很好。你只需要订阅 observable。

点赞this.uploadProgress$.subscribe();

工作示例here。

可以了解rxjs@learnrxjs.io

Answer 2

通过数组映射怎么样：

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