Télécharger le fichier en angulaire2: Corps (FormData) vide

Question

Je suis en train de télécharger une image avec Angular2 à mon service REST (Loopback). Le service Loopback fonctionne (testé avec Postman) et accepte les fichiers avec l'en-tête x-www-form-urlencoded.

Voici une méthode de service simplifiée qui envoie la requête 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() : {})); 
} 

Notez que j'ai mis l'en-tête d'application/x-www-form-urlencoded et envoyer les formData contenant le fichier dans le corps .

En angulaire, jusqu'au point où je http.post la demande, le formData est rempli avec le fichier, le contenu du fichier est présent, va bien everyting:

Data before Request

Mais dans la demande, le corps est un objet vide {}:

Request

Je suppose, angulaire essaie de faire JSON.stringify (formData), au moins, lorsque je tente, je reçois aussi « {} » en sortie .

J'ai vu beaucoup de messages faisant exactement la même chose (http.post (url, formData)). Alors qu'est-ce qui me manque?

Answer 1

De cette How to inspect FormData? réponse si ce MDN documentation outputing FormData dans la console résultats seulement dans un {}.

FormData peuvent être directement utilisés dans une structure for ... of, au lieu de entries(): for (var p of myFormData) est équivalent à for (var p of myFormData.entries()).

Answer 2

Il y a une autre solution consiste à utiliser base64 et le convertir dans le côté arrière-plan: `

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

enlèverait juste headers.append('Content-Type', 'multipart/form-data'); peut résoudre le problème.

Voir here

2017-08-24