Comment publiez-vous un objet FormData dans Angular 2?

Question

J'ai besoin de télécharger un fichier et d'envoyer un json avec, j'ai cette fonction:

 POST_formData(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');

        if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
        }

        headers.append("Accept", 'application/json');
        headers.delete("Content-Type");

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))

        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        })
    }
 

Mon problème est que, si je règle content-type sur " multipart/form-data ", mon serveur se plaint des limites, si je supprime complètement l'en-tête content-type , mon serveur se plaint que il " text/plain " est un type de support pris en charge.

Alors, comment envoyez-vous FormData avec angular2?

Answer 1

Modèle:

 <label class="btn btn-primary">
  <input type="file" style="display: none;" multiple="true" (change)="fileChange($event)" accept=".xml">
  <span>Click Me!</span>
</label>
 

UPD: Angular 5 - HttpClient + Typescript

 onFileUpload(event: EventTarget) {

  const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
  const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
  const files: FileList = target.files;

  const formData: FormData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }

  // POST
  this.httpClient.post<AnalyzedData>(uploadUrl, formData).subscribe(...);
}
 

ancien Http lib - avant Angular 4.3 :

 fileChange(event) {
    let files = event.target.files;
        if (files.length > 0) {
        let formData: FormData = new FormData();
        for (let file of files) {
             formData.append('files', file, file.name);
        }
        let headers = new Headers();
        headers.set('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(uploadURL, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
            data => {
                // Consume Files
                // ..
                console.log('uploaded and processed files');
            },
            error => console.log(error),
            () => {
                this.sleep(1000).then(() =>
                    // .. Post Upload Delayed Action
                )
            });
    }
}
 

Answer 2

C'est un Ouvrir Isuue sur Angular2 Dépôt Git, et il y a aussi une Demande d'extraction d'attente pour être fusionnées, l'espoir qu'il sera bientôt fusionné.

---

Sinon,

Vous pouvez utiliser XMLHttpRequest Objet directement, pour que.

Et n'oubliez pas de définir l'en-tête

xhr.setRequestHeader("enctype", "multipart/form-data");

// IE workaround for Cache issues
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Cache-Control", "no-store");
xhr.setRequestHeader("Pragma", "no-cache");

sur l' XMLHttpRequest que vous faites.

---

Des Questions Similaires:

Comment télécharger des fichiers dans Angular2

Angulaire 2 téléchargement de Fichiers à partir d'input type=file

Angular2 post fichier téléchargé

Answer 3

Je sais que cela a été marqué comme étant une réponse et qu'il est assez ancien. Cependant, un problème de publication de l'objet FormData sur un serveur d'authentification OpenIdConnect et les exemples de téléchargement de fichier ci-dessus ne correspondaient pas à ce que je recherchais.

Voici mon service qui obtient un OpenIdAuthToken:

 import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers, URLSearchParams} from '@angular/http'
import { OpenIdTokenRequest, SmartData } from '../model/openid-token-request';
import { OpenIdToken } from '../model/openid-token';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from 'rxjs';

@Injectable()

export class TokenService {

    constructor(private _http: Http) { }

    getToken(requestData: OpenIdTokenRequest, smartData: SmartData) {
        let _urlParams = new URLSearchParams();
        _urlParams.append('code', requestData.code);
        _urlParams.append('grant_type', requestData.grantType);
        _urlParams.append('redirect_uri', requestData.redirectUri);
        _urlParams.append('client_id', requestData.clientId);

        let _url = smartData.tokenUri;
        let _options = this.getTokenPostOptions();

        return this._http.post(_url, _urlParams, _options)
            .map(response => <OpenIdToken>response.json())
    }

    private getTokenPostOptions(): RequestOptions {

        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });
        let options = new RequestOptions({ headers: headers });

        return options;
    }

}
 

Answer 4

J'ai résolu ce problème, pas besoin de content-type du tout.

Voir ici, https://stackoverflow.com/a/45879409/2803344

Voir également ici pour savoir comment définir headers , Angular2 - définir les en-têtes pour chaque requête.

2017.8.25