上传angular2:Body(FormData)中的文件为空

Question

我正在尝试将带有Angular2的图片上传到我的REST服务(Loopback).Loopback服务工作(使用Postman测试)并接受带有x-www-form-urlencoded标头的文件.

这是一个发送POST请求的简化服务方法:

public uploadFile(url : string, file: File): Observable<any> {
  let headers: Headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let formData = new FormData();
  formData.append('file', file);

  let options: RequestOptionsArgs = { headers: headers };

  return this.http.post(url, formData, options)
  .map((res: any) => (res.text() != "" ? res.json() : {}));
}

请注意,我已将标头设置为application/x-www-form-urlencoded,并在正文中发送包含该文件的formData.

在Angular中,直到我http.post请求的位置,formData填充了文件,文件内容存在,每个都很好:

请求前的数据

但在请求中,正文是一个空对象{}:

请求

我假设,Angular试图做JSON.stringify(formData),至少,当我尝试这个时,我也得到"{}"作为输出.

我已经看到很多帖子完全相同(http.post(url,formData)).那我错过了什么？

Answer 1

只需删除headers.append('Content-Type', 'multipart/form-data');即可解决问题.

看到这里

2017年8月24日

Answer 2

从这里如何检查FormData？SO 答案和控制台中输出的MDN 文档FormData只会生成{}.

FormData 可以直接用在for ... of结构体中，而不是entries():for (var p of myFormData)相当于for (var p of myFormData.entries())。