上傳文件在angular2：身體（FormData）空

我想上傳一張Angular2到我的REST服務（環回）的圖片。 Loopback服務工作（使用Postman測試）並接受帶有x-www-form-urlencoded標頭的文件。上傳文件在angular2：身體（FormData）空

這裏的發送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的窗體-urlencoded和發射含有該文件在體內的FORMDATA 。

在角，直到在那裏我http.post的要求來看，FORMDATA填充了文件，文件內容存在，everyting的罰款：

Data before Request

但在要求下，人體是一個空對象{}：

Request

我認爲，角正試圖做JSON.stringify（FORMDATA），至少，當我嘗試這個，我還獲得「{}」的輸出。

我見過大量的帖子完全一樣（http.post（url，formData））。那麼我錯過了什麼？

來源

2017-01-29 Christoph

你有沒有嘗試給BLOB數據形成的？ –

奇怪。我最近創建了一個[Plunker]（https://plnkr.co/edit/R8yJpRWsE35pMpB1QeG3?p=preview）來回答類似的問題，正如你所看到的，只需發佈'formData'即可。 AFAIK，Angular不自動'JSON.stringify（formData）'。它會發布你現在通過的內容。 – AngularChef

控制檯上打印什麼？ –

從這個How to inspect FormData? SO回答這個MDN documentation在控制檯輸出FormData只是導致{}。

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

來源

2017-07-05 17:10:22 sebnukem

還有另一種解決方案是使用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); 
    };`

來源

2017-07-12 12:31:13

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

見here

2017年8月24日

來源

2017-08-24 09:58:48 Belter

這爲我解決了它，使用Web Api 2和Angular 4 – Namirna

這是爲什麼？ headers.append（'Content-Type'，'multipart/form-data'）有什麼問題？ – Omtechguy

上傳文件在angular2：身體（FormData）空

回答

相關問題