Question

我试图将带有Angular2的图片上传到我的REST服务（环回）。 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填充了文件，文件内容存在，每个人都很好：

Data before Request

但是在请求中，正文是一个空对象{}：

Request

我认为，Angular正试图做JSON.stringify（formData），至少，当我尝试这个时，我也得到＆＃34; {}＆＃34;作为输出。

我看到很多帖子做的完全相同（http.post（url，formData））。那我错过了什么？

Answer 1

只需删除headers.append('Content-Type', 'multipart/form-data');即可解决问题。

请参阅here

2017年8月24日

Answer 2

通过此How to inspect FormData? SO回答以及控制台中的MDN documentation输出FormData，只会生成{}。

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。设置（）而不是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));
 }

上传angular2：Body（FormData）中的文件为空

4 个答案: