上傳angular2：Body（FormData）中的文件為空

Question

我正在嘗試將帶有Angular2的圖片上傳到我的REST服務（Loopback）。 Loopback服務工作（使用Postman測試）並接受帶有x-www-form-urlencoded標頭的文件。

這是一個發送POST請求的簡化服務方法：

public uploadFile(url : string, file: File): Observable<any> {
  let headers: Headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  let formData = new FormData();
  formData.append('file', file);

  let options: RequestOptionsArgs = { headers: headers };

  return this.http.post(url, formData, options)
  .map((res: any) => (res.text() != "" ? res.json() : {}));
}

請注意，我已將標頭設置為application / x-www-form-urlencoded，並將包含該文件的formData發送到正文中。

在Angular中，直到我http.post請求的位置，formData填充了文件，文件內容存在，每個都很好：

請求前的數據

但在請求中，正文是一個空對象{}：

請求

我假設，Angular試圖做JSON.stringify（formData），至少，當我嘗試這個時，我也得到“{}”作為輸出。

我已經看到很多帖子完全相同（http.post（url，formData））。 那我錯過了什么？

Answer 1

只需刪除headers.append('Content-Type', 'multipart/form-data'); 可以解決問題。

看到這里

2017年8月24日

Answer 2

從這個如何檢查FormData？ SO答案和在控制台中輸出FormData MDN文檔只會導致{} 。

FormData可以直接用於for ... of結構，而不是entries() ： for (var p of myFormData)等價於for (var p of myFormData.entries()) 。

Answer 3

另一種解決方案是使用base64並在后端進行轉換：`

var reader = new FileReader();
    reader.readAsDataURL(file);
    let res;
    reader.onload = function () {
    let headers = new Headers();
    headers.append("Content-type","application/x-www-form-urlencoded");
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(config.serverUrl+"/index.php",
      {
         "file":reader.result}, options)
         .toPromise()
         .then(this.extractData)
         .catch(this.handleError);
      }
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };`

Answer 4

在我的情況下，我使用formData。 set （）而不是formData.append（）

請看下面的例子：

 UploadFile(fileToUpload: File): Observable<boolean> {
     const endpoint = 'api/image/upload';
     var formData = new FormData();
     formData.set('file', fileToUpload);
     return this._http
     .post(endpoint, formData)
     .map(() => { return true; })
     .catch((e) => this.handleError(e));
 }