具有多部分表单的 Angular 后请求具有错误的内容类型答案

【问题标题】：Angular post-request with a multipart form has wrong content type具有多部分表单的 Angular 后请求具有错误的内容类型
【发布时间】：2020-01-20 17:43:23
【问题描述】：

我正在使用以下函数将文件上传到具有 Angular 7 HttpClient 的服务器

  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 设置了错误的内容类型标头（application/json 而不是“multipart/form-data”），因此服务器无法读取文件。这是我在开发者工具上看到的

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

【问题讨论】：

标签： angular file-upload angular-httpclient

【解决方案1】：

这是服务器标头，服务器使用 json 回复你，这是绝对正常的。找个库来加载这样的图片更容易更快捷 https://www.npmjs.com/package/angular-file-uploader 或https://www.npmjs.com/package/angular-file

【讨论】：

不，那是请求头，浏览器设置为意大利语，“richiesta”表示“请求”

【解决方案2】：

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

【讨论】：

非常感谢，这正是发生的事情。
感谢您为我指明了正确的方向。我花了三个小时试图弄清楚为什么文件无法上传，三个小时我再也回不来了，这是因为我试图巧妙地使用 HttpInterceptor 并添加了一个 Content-Type 标头。
经过 3 小时的研究，我找到了那个帖子。正是这个问题。谢谢！

【解决方案3】：

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

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

'内容类型' : '应用程序/json;字符集=utf-8'

这导致了错误的内容类型错误。所以我需要绕过拦截器进行这种类型的调用。我从Here关注。

我导入 HttpBackend

声明 HttpClient 变量

在构造函数中声明

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

【讨论】：

能否请您进一步详细说明您是如何解决问题的。我面临同样的上传问题。 System.InvalidOperationException: Incorrect Content-Type: application/json