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

Question

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

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

Answer 1

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

Answer 2

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

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

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

这是创建错误的内容类型错误。 所以我需要绕过拦截器来进行这种类型的调用。 我从这里跟随。

我导入 HttpBackend

声明 HttpClient 变量

在构造函数中声明

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

Answer 3

使用FormData时不能将Content-Type设置为multipart/form-data ，否则会出现以下错误：

缺少内容类型边界错误

在您的服务中发送带有fromData的文件：

   const headers = new Headers();
   headers.append("Accept", "application/json");
   const options = new RequestOptions({ headers: headers });

   const formData: FormData = new FormData();
   formData.append(key, value);   

   return this.http
     .post(`${this.baseUrl}/url`, formData, options)
     .map(this.extractData)
     .catch(this.handleError);

  private handleError(error: Response): Observable<any> {
    console.error("observable error: ", error);
    return Observable.throw(error.statusText);
  }

  private extractData(res: Response) {
    const body = res.json();
    return body || {};
  }

将带有 formData 的文件发送到服务器的完整示例

Answer 4

这是服务器 header，服务器使用 json 回答您，这是绝对正常的。 寻找一个库来加载像这样的图片更容易和更快