Angular post-request 多部分表单的内容类型错误

Question

我正在使用以下函数将文件上传到 HttpClient 为 angular 7

的服务器

  pushFileToStorage(productId, key, file: File): Observable<any> {
    let formdata: FormData = new FormData();

    formdata.append('prod', file);
    let url_ = '/admin5/api/v1/product/images/upload?';
    url_ += "productId=" + encodeURIComponent("" + productId) + "&";
    url_ += "kind=" + encodeURIComponent("" + key);

    return this.http.post(url_,formdata);
  }

我遇到的问题是 HttpClient 设置了错误的内容类型 header（application/json 而不是 "multipart/form-data"），因此服务器无法读取文件。这是我在开发者工具上看到的

知道我做错了什么吗？谢谢

Answer 1

这里是服务器header，服务器用json回答你，这是绝对正常的。像这样找个库加载图片更方便快捷 https://www.npmjs.com/package/angular-file-uploader 或 https://www.npmjs.com/package/angular-file

Answer 2

我刚发现我正在处理的项目有一个 HttpInterceptor，默认情况下它会向任何未设置内容类型的请求添加内容类型“application/json”。这就是问题所在。

Answer 3

就我而言，我也在使用 FormData。这背后的原因是 HTTP 拦截器，正如@Maurizio Pozzobon 在接受的答案中所述。我正在使用如下所示的 HTTP 拦截器--

这里我的拦截器将我的令牌发送到每个 http 调用

'Content-Type' : 'application/json; charset=utf-8'

创建了错误的内容类型错误。所以我需要绕过这种类型调用的拦截器。我关注 .

我导入 HttpBackend

声明 HttpClient 变量

在构造函数中声明

现在使用此 httpclient 我请求 Post api 调用带有我的文件的 formdata。此 Http Post 调用绕过 Http 拦截器。我的问题就这样解决了。

Angular post-request 多部分表单的内容类型错误

Angular post-request with a multipart form has wrong content type

file-upload

angular

angular-httpclient