Javascript 在angular2中上载文件：正文（FormData）为空

我正在尝试将Angular2的图片上传到我的REST服务（环回）。 环回服务工作（使用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() : {}));
}

公共上传文件（url:string，file:file）：可观察

但是在请求中，主体是一个空对象{}：


我假设Angular正在尝试执行JSON.stringify（formData），至少，当我尝试此操作时，我还将“{}”作为输出

我已经看到很多帖子做了完全相同的事情（http.post（url，formData））。那么我错过了什么
 从这个SO答案和控制台中输出的
FormData
只会产生一个
{}

FormData可以直接在
中用于。。。结构，而不是
entries（）
：
for（myFormData的var p）
相当于
for（myFormData的var p.entries（））
另一种解决方案是使用base64并在后端转换它：
`

只需删除
headers.append（'Content-Type'，'multipart/formdata'）可以解决问题

看

2017-08-24
在我的例子中，我使用了formData。设置（）而不是formData.append（）

请参见下面的示例：

 UploadFile(fileToUpload: File): Observable<boolean> {
     const endpoint = 'api/image/upload';
     var formData = new FormData();
     formData.set('file', fileToUpload);
     return this._http
     .post(endpoint, formData)
     .map(() => { return true; })
     .catch((e) => this.handleError(e));
 }

UploadFile（fileToUpload:File）：可观察{
const endpoint='api/image/upload'；
var formData=new formData（）；
formData.set（'file'，fileToUpload）；
返回此。\u http
.post（端点，formData）
.map（（）=>{return true；}）
.catch（（e）=>此.handleError（e））；
}
您是否尝试为表单提供blob数据？奇怪。我最近创建了一个解决类似问题的工具，正如您所看到的，只需发布
formData
即可。好的，Angular不会自动
JSON.stringify（formData）
。它会按原样发布您传递的内容。控制台中打印的内容是什么？我也用同样的方法完成了。你100%确定你的“文件”设置了什么吗？@AngularFrance谢谢你的帮助！我将它与我的代码进行了比较，并观察了输出，结果非常相似，而且所有的数据都设置好了，真奇怪！我尝试从请求中删除选项，因为我认为这是我们解决方案之间唯一不同的方面。现在它开始工作了。然后，该请求使用多部分/表单数据，但有趣的是，我的环回服务并不关心。然而，这仍然有点令人沮丧。想知道为什么它不能与URLEncoded一起工作这为我解决了它，使用Web Api 2和Angular 4为什么？标题有什么问题。append（'Content-Type'，'multipart/formdata'）？你能看到我的问题吗？请看这个包，我有最好的文件上传器@昂纳布
 UploadFile(fileToUpload: File): Observable<boolean> {
     const endpoint = 'api/image/upload';
     var formData = new FormData();
     formData.set('file', fileToUpload);
     return this._http
     .post(endpoint, formData)
     .map(() => { return true; })
     .catch((e) => this.handleError(e));
 }