Angular make http get request 然后用get request中的数据make put request

Question

我想在 AWS S3 上上传多个图像。

首先在前端我上传图像并向用户显示图像的预览，然后在 for 循环中我每次运行函数 uploadFilesSimulator 来上传每个图像。

  prepareFilesList(files: Array<any>) {
  for (const item of files) {
  item.progress = 0;
  this.files.push(item);

  const reader = new FileReader();
  reader.onload = (filedata) => {
    item.url = reader.result + '';
  }

  reader.readAsDataURL(item);

  this.uploadFilesSimulator(item);
}

}

首先，我向我的节点 js API 发出 get 请求。 结果是key和url。 然后在获取 url 后，我运行 put 请求将图像添加到该 url。

  uploadFilesSimulator(file: any) {
this.formService.getUploadUrl().subscribe(data => {
  let upload = this.formService.uploadImage(data.url, file).subscribe(data => {
    console.log(data)
  }, err => console.log(err));
});

这是有效的，但我想避免嵌套订阅。 我应该使用什么 rxjs 运算符？

Answer 1

三个运算符可以做到这一点： switchMap 、 mergeMap和concatMap 。 更适合您的情况是mergeMap ，即使对于您的特定情况不会有任何区别，因为this.formService.getUploadUrl()只会发出一个事件。

更多细节，我推荐这个优秀的网站： https : //rxmarbles.com/

你可以这样使用它：

uploadFilesSimulator(file: any) {
    return this.formService.getUploadUrl().pipe(
        mergeMap(data => this.formService.uploadImage(data.url, file))
    );
}