I need to upload a file and send some json along with it, I have this function:
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() } } }) }
My issue is, if I set the content-type to "multipart/form-data" my server complains about the boundaries, if I remove the content-type header completely, my server complains that it "text/plain" a supported media type.
So, how do you send FormData with angular2?
回答1:
It's an Open Isuue on Angular2 Git Repository, and there is also a Pull Request waiting to be merged, hope that it will be merged soon.
onFileUpload(event: EventTarget) { const eventObj: MSInputMethodContext = event; const target: HTMLInputElement = eventObj.target; const files: FileList = target.files; const formData: FormData = new FormData(); for (let i = 0; i (uploadUrl, formData).subscribe(...); }
old Http lib - before 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 ) }); } }
回答3:
I know this has been marked answered and is pretty old, however I had an issue posting the FormData object to an OpenIdConnect AuthServer, and the file upload examples above weren't what I was looking for.
Here is my service that gets an 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 => 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; } }
回答4:
I solved this problem, don't need content-type at all.
