【问题标题】:File Upload Angular2 via multipart/form-data, 400 Error通过 multipart/form-data 上传 Angular2 文件,400 错误
【发布时间】: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))
  }
}

我在这里错过了什么?

【问题讨论】:

    标签: angularjs file-upload http-post angular2-forms http-status-code-400


    【解决方案1】:

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

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

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

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

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

    headers.delete('Content-Type');
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-12-14
      • 1970-01-01
      • 2019-08-27
      • 2014-05-28
      • 2015-10-23
      • 1970-01-01
      • 1970-01-01
      • 2019-04-05
      相关资源
      最近更新 更多