Wie POST ein FormData-Objekt in Angular 2?

Question

Ich brauche eine Datei zu laden und einige json zusammen mit ihm zu schicken, habe ich diese Funktion:

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() } 
      } 
     }) 
    } 

Mein Problem ist, wenn ich die content-type auf „multipart/form-data“ mein Server beschwert sich über die Grenzen gesetzt, ich, wenn Entfernen Sie die content-type Header vollständig, beschwert sich mein Server, dass es "text/plain" ein unterstützter Medientyp ist.

Also, wie senden Sie FormData mit angular2?

Answer 1

Es ist ein Open Isuue auf Angular2 Git Repository, und es gibt auch eine Pull Request warten verschmolzen zu werden, hoffen, dass es bald verschmolzen wird. für das

---

Alternativ

können Sie XMLHttpRequest Objekt direkt verwenden.

Und vergessen Sie nicht die Header-

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"); 

auf dem XMLHttpRequest zu setzen, die Sie machen.

---

ähnliche Fragen:

How to upload file in Angular2

Angular 2 File upload from input type=file

Angular2 post uploaded file

Answer 2

Ich weiß, das beantwortet markiert wurde und ist ziemlich alt, aber ich hatte ein Problem der Entsendung FormData-Objekt zu einem OpenIdConnect AuthServe r, und die obigen Beispiele zum Hochladen von Dateien waren nicht das, wonach ich suchte.

Hier ist mein Dienst, der eine OpenIdAuthToken bekommt:

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 3

Vorlage:

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

UPD: Eckige 5 - Httpclient + Typoskript

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

alt Http lib - vor 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 4

ich dieses Problem gelöst, müssen überhaupt nicht content-type.

Sehen Sie hier, https://stackoverflow.com/a/45879409/2803344

Auch hier sehen zu überprüfen, wie headers zu setzen, Angular2 - set headers for every request

2017.8.25