如何使用 Angular 9 发布 Blob？答案

【问题标题】：How to POST Blob with Angular 9?如何使用 Angular 9 发布 Blob？
【发布时间】：2020-09-01 15:42:30
【问题描述】：

我正在尝试将 blob 发送到我的服务器，但它不起作用。我正在使用创建 Blob 的 doctemplater 库。这个 blob 是正确的，因为我可以保存到本地文件（使用 saveAs(...)）。但现在我也需要将此文件传输到我的服务器。

let out = doc.getZip().generate({
    type: 'blob',
    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});

所以我在努力

const data = {
    name: "test,
    content: out
}

this.http.post<any[]>(this.path, data).pipe(
    catchError((err: HttpErrorResponse) => {
        // ...
    })
);

问题是data['out'] 在服务器端总是空的。那么如何向服务器发送 blob？

【问题讨论】：

data['out'] 为空是什么意思？

标签： angular angular-httpclient angular-http

【解决方案1】：

尝试像这样使用FormData：

const formData = new FormData();
formData.append(name, value, filename);

欲了解更多信息，请访问link。

【讨论】：

【解决方案2】：

试试

this.http.post<any[]>(path, data, { responseType: 'blob'})

【讨论】：

【解决方案3】：

在你的服务文件中创建一个 post 方法

updateDistrictLogo(formdata: FormData): Observable<any> {
  return this.http.post<any>(
    this.constantService.getUrl(your API URL), formdata,
);
}

在您的 componen.ts 文件中在构造函数中创建服务实例

   constructor(private ContactService: ContactInformationService) {}

然后创建一个方法并调用api

 updatefile() {
  const formdata = new FormData();
        formdata.append("file", blob);
        this.ContactService.updateDistrictLogo(formdata).subscribe(
            success => {
               console.log(success);
            },
            error => {
           console.log(error);
         }
        );
   }

【讨论】：