将 http.post 之后的数据传递给组件

Question

我正在开发一个小型网络应用程序。现在我尝试实现一个文件上传功能。一切正常。我可以上传，保存在服务器上，也可以接收文件路径。

我现在纠结的事情是如何将路径传递回组件。

我尝试了几种解决方案，但我不确定使用什么以及如何修改代码。

我应该使用 async、await 还是 Eventemitter、Observable 等...？

以及如何正确使用它们以接收组件中的路径，我知道我必须等待服务功能完成。

服务中的函数

  // Images hochladen
  uploadImage(postData: FormData): string{
    this.http.post('https://10.0.0.3:3000/api/upload/image', postData)
    .subscribe((responseData) => {
      this.imgPath = responseData['path'];
      console.log(this.imgPath)
    });
    return this.imgPath;
  };

而在组件中

const imgPath = this.projectsService.uploadImage(dataFile);
console.log(imgPath);

感谢您的帮助:-)

此致

马库斯

Answer 1

两个主要选择：

使用承诺：

服务：

async uploadImage(postData: FormData): Promise<string> {
    const promise = this.http.post('https://10.0.0.3:3000/api/upload/image', postData).toPromise();
    return (await promise)['path'];
  };

组件：

async something() {
  const imgPath = await this.projectsService.uploadImage(dataFile);
  console.log(imgPath);
}

使用可观察对象：

服务：

uploadImage(postData: FormData): Observable<string> {
    return this.http.post('https://10.0.0.3:3000/api/upload/image', postData)
               .pipe(last(),map(r => r['path']));
  };

组件：

something() {
  this.projectsService.uploadImage(dataFile).subscribe(imgPath => {
     console.log(imgPath);
  }
}

将 http.post 之后的数据传递给组件

Pass data after http.post to component

http

form-data

observable

angular

使用承诺：

使用可观察对象：