通过 multipart/form-data 上传文件 Angular2，400 错误

Question

我需要像这样通过 multipart/form-data 上传一个文件和一些元信息：

Header
----boundary
Meta
----boundary
File
----boundary

出于某种原因，我总是收到 400 错误，后端服务器告诉我，缺少 Meta-Field。但是，如果我使用 Wireshark 查看 Hex/Ascii 转储，该字段肯定存在。
以下 Curl 命令运行良好，文件上传成功：

curl -H "Expect:" -v -i -X POST -H "Content-Type: multipart/form-data" -H "Authorization: "token" -F "File=@/location" -F 'Meta={"access":"token"}' http://path

因此这似乎不是后端故障。我的 Angular (4.1.3) 请求一定是错误的，但我无法弄清楚它有什么问题。

模板代码：

<input #file_input type="file" (change)="onFileInputChange($event)" multiple>

Angular2-代码:

onFileInputChange(event) {
  let fileList: FileList = event.target.files;
  for (let i = 0; i < fileList.length; i++) {
    let fp: File = fileList[i];
    let formData: FormData = new FormData();
    formData.append('File', fp, fp.name);
    const body = JSON.stringify({
       'access': "token"
    });
    this.formData.append('Meta', body);
    let RequestHeader = new Headers();
    // auto set content type
    RequestHeader.append('Content-Type', '');
    RequestHeader.append('Accept', 'application/json');
    RequestHeader.append('Authorization', "token");

    this.http.post(this.backend_url, formData, RequestHeader).map(
    res => res.json()).subscribe(
            data => console.log('success'),
            error => console.log(error))
  }
}

我在这里错过了什么？

Answer 1

我终于找到了解决办法。 Content-Type header 格式错误：

Content-Type: , multipart/form-data; boundary=----WebKit12345

实际代码中的内容类型header是预设的。通过调用

headers.set('Content-Type', '');

我以为header内容类型被覆盖了，但实际上它前面加了一个空字符串，所以有一个逗号，当然无法解析。
我通过完全删除内容类型 header 解决了这个问题：

headers.delete('Content-Type');

通过 multipart/form-data 上传文件 Angular2，400 错误

File Upload Angular2 via multipart/form-data, 400 Error

file-upload

http-post

http-status-code-400

angularjs

angular2-forms