example - ¿Cómo se PUBLICA un objeto FormData en Angular 2?

ng2-file-upload angular 4

Question

Necesito subir un archivo y enviar un json junto con él, tengo esta función:

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

Mi problema es que si configuro el content-type como " multipart/form-data " mi servidor se queja de los límites, si elimino completamente el encabezado de content-type , mi servidor se queja de que es " text/plain " un tipo de medio admitido. .

Entonces, ¿cómo se envía FormData con angular2?

Answer 1

Es un Open Isuue en Angular2 Git Repository, y también hay una solicitud de extracción en espera de fusionarse, espero que se fusione pronto.

Alternativamente,

Puede usar XMLHttpRequest Object directamente para eso.

Y no te olvides de configurar el encabezado

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

en XMLHttpRequest que usted hace.

Preguntas similares:

Cómo subir un archivo en Angular2

Angular 2 Carga de archivos desde el tipo de entrada = archivo

Angular2 archivo subido

Answer 2

Modelo:

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

viejo Http lib - antes de 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 3

Resolví este problema, no necesito ningún content-type .

Ver aquí, https://.com/a/45879409/2803344

También vea aquí para comprobar cómo configurar headers , Angular2 - establezca encabezados para cada solicitud

2017.8.25

Answer 4

Sé que esto ha sido marcado como respondido y es bastante viejo, sin embargo tuve un problema al publicar el objeto FormData en un OpenIdConnect AuthServer, y los ejemplos de carga de archivos anteriores no eran lo que estaba buscando.

Aquí está mi servicio que obtiene 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;
}
}