W jaki sposób POST obiekt FormData w Angular 2?

Question

muszę przesłać plik i wysłać jakąś json wraz z nim, mam tę funkcję:

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

Mój problem jest, jeśli mogę ustawić content-type do „multipart/form-data” mój serwer narzeka granic, gdybym całkowicie usunąć nagłówek content-type, mój serwer narzeka, że ​​"text/plain" obsługiwany typ multimediów.

Jak wysłać formularz FormData z funkcją angle2?

Answer 1

To Open Isuue na Angular2 repozytorium Git, a istnieje również Pull Request czeka zostać połączone, mam nadzieję, że zostanie ona połączyła wkrótce.

---

Alternatywnie

Można użyć XMLHttpRequest obiektu bezpośrednio do tego.

I nie zapomnij, aby ustawić nagłówek

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

na XMLHttpRequest że można zrobić.

---

Podobne pytania:

How to upload file in Angular2

Angular 2 File upload from input type=file

Angular2 post uploaded file

Answer 2

Znam ten został oznaczony odpowiedział i jest dość stary, jednak miałem problem delegowania Obiekt FormData do OpenIdConnect AuthServe r, a powyższe przykłady przesyłania plików nie były tym, czego szukałem.

Oto moja usługa, która dostaje 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 3

Template:

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

UPD: kątowa 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(...); 
} 

stare Http lib - przed 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

I rozwiązać ten problem, nie trzeba content-type w ogóle.

Zobacz tutaj https://stackoverflow.com/a/45879409/2803344

patrz także tutaj, aby sprawdzić, jak ustawić headers, Angular2 - set headers for every request

2017.8.25