Datei hochladen in angular2: Body (FormData) leer

Question

Ich versuche ein Bild mit Angular2 auf meinen REST Service (Loopback) hochzuladen. Der Loopback-Dienst funktioniert (getestet mit Postman) und akzeptiert Dateien mit dem Header x-www-form-urlencoded.

Hier ist eine vereinfachte Service-Methode, die die POST-Anforderung sendet:

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() : {})); 
} 

Bitte beachte, dass ich die Header-Anwendung festgelegt haben/x-www-form-urlencoded und die Formulardaten enthalten, die Datei in dem Körper senden .

In Angular, bis zu dem Punkt, wo ich die Anfrage http.post, die Formulardaten mit der Datei aufgefüllt wird, der Inhalt der Datei vorhanden ist, every ist in Ordnung:

Data before Request

Aber in der Anfrage, der Körper ist ein leeres Objekt {}:

Request

ich gehe davon aus, Angular versucht JSON.stringify (Formdata), zumindest zu tun, wenn ich das versuche, erhalte ich auch „{}“ als Ausgang .

Ich habe viele Beiträge gesehen, die genau das gleiche machen (http.post (url, formData)). Also was fehlt mir?

Answer 1

Von diesen How to inspect FormData? SO beantworten und diese MDN documentation outputing FormData in der Konsole führt nur in einem {}.

Formdata kann direkt in einer for ... of Struktur verwendet werden, anstelle von entries(): for (var p of myFormData) ist for (var p of myFormData.entries()) äquivalent.

Answer 2

Es gibt eine andere Lösung ist base64 zu verwenden und sie in Back-End-Seite zu konvertieren: `

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 3

Entfernen Sie einfach headers.append('Content-Type', 'multipart/form-data'); Problem lösen können.

Siehe here

2017-08-24