Angular 2 没有将 Content-Type 设置为 'multipart/form-data' 而是设置为 'application/json'答案

【问题标题】：Angular 2 doesn't set Content-Type to 'multipart/form-data' but to 'application/json'Angular 2 没有将 Content-Type 设置为 'multipart/form-data' 而是设置为 'application/json'
【发布时间】：2018-01-26 05:40:01
【问题描述】：

我正在尝试在基于 Angular 2 的 Ionic 移动项目中上传文件。

我有一个至少包含 3 个字段（_id、类型和文件）的 FormData 对象。

this.formData = new FormData();
if (fileCount > 0) { // a file was selected
  for (let i = 0; i < fileCount; i++) {
    this.formData.append('file', inputEl.files.item(i));
  }
}

[... in the upload method I pass this.formData as files ...]

files.append('_id', data._id);
files.append('tipo', tipo);

我将它传递给我的上传方法，并将“Content-Type”设置为“multipart/form-data”

let options: RequestOptionsArgs = new RequestOptions();
options.headers = this.headers; (In this.headers I have my Authorization header set)
options.headers.delete('Content-Type');
options.headers.set('Content-Type', 'multipart/form-data');

我发了一个 http 帖子

this.http.post(
  `${this.apiUrl}/utenti/upload`,
  files,
  options
)

但我收到了来自服务器的错误响应：

Sorry, an error occurred loading the page (500)
Unexpected token -

我查看了 Chrome 的网络选项卡，发现我的请求标头错误：

Content-Type: application/json

另一方面，我的有效载荷是正确的表单数据样式：

------WebKitFormBoundaryKiWq1WTTF3AJCFRX
Content-Disposition: form-data; name="file"; filename="IMG_0001.JPG"
Content-Type: image/jpeg


------WebKitFormBoundaryKiWq1WTTF3AJCFRX
Content-Disposition: form-data; name="_id"

58e7b968bed0575e13efc63c
------WebKitFormBoundaryKiWq1WTTF3AJCFRX
Content-Disposition: form-data; name="tipo"

foto
------WebKitFormBoundaryKiWq1WTTF3AJCFRX--

你猜猜这里出了什么问题？

【问题讨论】：

标签： angular upload ionic2 multipartform-data multipart

【解决方案1】：

如果您已实现拦截器，请检查您是否未覆盖标头。

【讨论】：