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 回答您，這是絕對正常的。 尋找一個庫來加載像這樣的圖片更容易和更快