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

Posted 2023-03-13

【中文标题】通过 multipart/form-data 上传 Angular2 文件，400 错误

【英文标题】：File Upload Angular2 via multipart/form-data, 400 Error

【发布时间】：2018-03-28 23:53:49

【问题描述】：

我需要像这样通过 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))
  

我在这里错过了什么？

【参考方案1】：

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

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

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

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

我假设标题内容类型已被覆盖，但实际上在其前面添加了一个空字符串，因此有一个逗号，当然无法解析。 我通过完全删除内容类型标题解决了这个问题：

headers.delete('Content-Type');