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

我试图用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被填充文件，文件内容存在，每一个都很好：

请求前的数据

但是在请求中，主体是一个空对象{}：

请求

我假设，Angular试图做JSON.stringify（formData），至少，当我尝试这个时，我也会得到“{}”作为输出。

我见过很多帖子完全一样（http.post（url，formData））。 那么我错过了什么？

---

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

看这里

2017年8月24日

---

从这个如何检查FormData？ 所以回答和在控制台中输出FormData MDN文档只会导致{} 。

FormData可以直接用于结构的for ... of而不是entries() ： for (var p of myFormData)等价for (var p of myFormData.entries()) 。

---

还有另一种解决方案是使用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);
    };`

链接地址: http://www.djcxy.com/p/94857.html

上一篇: Upload file in angular2: Body (FormData) empty

下一篇: Angular 2 Error encountered resolving symbol values statically