在angular2中上传文件：正文（FormData）为空答案

【问题标题】：Upload file in angular2: Body (FormData) empty在angular2中上传文件：正文（FormData）为空
【发布时间】：2017-06-14 21:47:49
【问题描述】：

我正在尝试将使用 Angular2 的图片上传到我的 REST 服务（环回）。 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 都填充了文件，文件内容存在，一切都很好：

Data before Request

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

Request

我假设，Angular 正在尝试做 JSON.stringify(formData)，至少，当我尝试这个时，我也会得到“{}”作为输出。

我看到很多帖子都做同样的事情（http.post(url, formData)）。那么我错过了什么？

【问题讨论】：

您是否尝试将 blob 数据提供给表单？
奇怪。我最近创建了一个Plunker 来回答类似的问题，如您所见，只需发布formData 即可。 AFAIK，Angular 不会自动 JSON.stringify(formData)。它会按原样发布您传递的内容。
控制台打印了什么？
我也这样做了。您是否 100% 确定您的“文件”已设置为某些内容？
@AngularFrance 感谢 Plunker！我将它与我的代码进行了比较并观察了输出，它是如此相似，而且所有数据都已设置，真的很奇怪！我尝试从请求中删除选项，因为我认为这是我们解决方案之间唯一不同的方面。现在它可以工作了。然后请求带有 multipart/form-data 但有趣的是我的 Loopback 服务并不关心。但是，这仍然有点令人沮丧。想知道为什么它不适用于 urlencoded

标签： javascript angular typescript form-data

【解决方案1】：

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

见here

2017-08-24

【讨论】：

这为我解决了这个问题，使用 Web Api 2 和 Angular 4
这是为什么呢？ headers.append('Content-Type', 'multipart/form-data') 有什么问题？
你能看看我的问题吗：stackoverflow.com/questions/49942899/upload-file-in-angular-5
请看这个包github.com/bleenco/ngx-uploader，我找到的最好的文件上传器。 @OnnaB

【解决方案2】：

从这个How to inspect FormData? SO 答案和这个MDN documentation 在控制台中输出FormData 只会导致{}。

FormData 可以直接用在for ... of 结构中，而不是entries()：for (var p of myFormData) 等价于for (var p of myFormData.entries())。

【讨论】：

【解决方案3】：

还有另一种解决方案是使用 base64 并在后端进行转换： `

var reader = new FileReader();
    reader.readAsDataURL(file);
    let res;
    reader.onload = function () {
    let headers = new Headers();
    headers.append("Content-type","application/x-www-form-urlencoded");
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(config.serverUrl+"/index.php",
      {
         "file":reader.result}, options)
         .toPromise()
         .then(this.extractData)
         .catch(this.handleError);
      }
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };`

【讨论】：

【解决方案4】：

在我的例子中，我使用了 formData.set() 而不是 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));
 }

【讨论】：