上传文件在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）空

回答

相关问题