web-dev-qa-db-fra.com

Comment tu POST un objet FormData dans Angular 2?

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 qu'il "text/plain" soit un type de support pris en charge.

Alors, comment envoyez-vous FormData avec angular2?

angulartypescriptfile-uploadangular2-http
40
Sebastian Olsen

C'est un Open Isuue sur Angular2 Git Repository, et il y a aussi un Pull Request qui attend d'être fusionné, espérons qu'il le sera bientôt.

Alternativement,

Vous pouvez utiliser XMLHttpRequest Object directement, pour cela.

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 la XMLHttpRequest que vous faites.

Questions similaires:

Comment télécharger un fichier dans Angular2

Angulaire 2 Téléchargement de fichier à partir du type d'entrée = fichier

Angular2 post fichier téléchargé

12
Ankit Singh

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
                )
            });
    }
}
27
Dhruvan Ganesh

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;
    }

}
5
cobolstinks

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

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

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

2017.8.25

1
Belter