Comment afficher un objet FormData en angle 2?
j'ai besoin de télécharger un fichier et l'envoyer certains json avec elle, 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, si je mets le content-type à " multipart/form-data "mon serveur se plaint au sujet des limites, si je supprime l'en-tête content-type complètement, mon serveur se plaint qu'il " text/plain " un type de support supporté.
alors, comment envoyer FormData avec angular2?
4 réponses
C'est un Open Isuue sur le dépôt Git Angular2, et il y a aussi une Pull Request en attente de fusion, en espérant qu'elle sera bientôt fusionnée.
alternativement,
vous pouvez utiliser XMLHttpRequest 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 le XMLHttpRequest que vous faites.
Questions Similaires:
Comment faire pour télécharger le fichier dans Angular2
Angulaire 2 téléchargement de Fichiers à partir d'input type=file
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: Angulaire 5 - HttpClient + Tapuscrit
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(...);
}
vieux Http lib - avant Angulaire 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
)
});
}
}
je sais que cela a été marqué answered et est assez vieux, mais j'ai eu un problème en affichant L'objet FormData sur un serveur AuthServer OpenIdConnect, et les exemples de téléchargement de fichier ci-dessus n'étaient pas ce que je cherchais.
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;
}
}
j'ai résolu ce problème, je n'ai pas besoin de content-type du tout.
voir ici, https://stackoverflow.com/a/45879409/2803344
Voir aussi ici pour vérifier comment définir headers , Angular2 - mettre des en-têtes pour chaque requête
2017.8.25