transformrequest form data angularjs http file-upload http-headers multipartform-data

angularjs - transformrequest - Envíe archivos multipart/form-data con angular usando $ http



send multipart form data angular 5 (3)

Aquí hay una respuesta actualizada para Angular 4 y 5. TransformRequest y angular.identity se eliminaron. También he incluido la posibilidad de combinar archivos con datos JSON en una solicitud.

Solución Angular 5:

import {HttpClient} from ''@angular/common/http''; uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { // Note that setting a content-type header // for mutlipart forms breaks some built in // request parsers like multer in express. const options = {} as any; // Set any options you like const formData = new FormData(); // Append files to the virtual form. for (const file of files) { formData.append(file.name, file) } // Optional, append other kev:val rest data to the form. Object.keys(restObj).forEach(key => { formData.append(key, restObj[key]); }); // Send it. return this.httpClient.post(uploadUrl, formData, options) .toPromise() .catch((e) => { // handle me }); }

Solución Angular 4:

// Note that these imports below are deprecated in Angular 5 import {Http, RequestOptions} from ''@angular/http''; uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { // Note that setting a content-type header // for mutlipart forms breaks some built in // request parsers like multer in express. const options = new RequestOptions(); const formData = new FormData(); // Append files to the virtual form. for (const file of files) { formData.append(file.name, file) } // Optional, append other kev:val rest data to the form. Object.keys(restObj).forEach(key => { formData.append(key, restObj[key]); }); // Send it. return this.http.post(uploadUrl, formData, options) .toPromise() .catch((e) => { // handle me }); }

Sé que hay muchas preguntas sobre esto, pero no puedo hacer que esto funcione:

Quiero cargar un archivo de entrada a un servidor en multipart / form-data

He intentado dos enfoques. Primero:

headers: { ''Content-Type'': undefined },

Lo que resulta, por ejemplo, en una imagen.

Content-Type:image/png

mientras que debe ser multipart / form-data

y el otro:

headers: { ''Content-Type'': multipart/form-data },

Pero esto solicita un encabezado de límite, que creo que no debería insertarse manualmente ...

¿Cuál es una forma limpia de resolver este problema? He leído que puedes hacer

$httpProvider.defaults.headers.post[''Content-Type''] = ''multipart/form-data; charset=utf-8'';

Pero no quiero que todas mis publicaciones sean multipart / form-data. El valor predeterminado debe ser JSON


Eche un vistazo al objeto FormData: https://developer.mozilla.org/en/docs/Web/API/FormData

this.uploadFileToUrl = function(file, uploadUrl){ var fd = new FormData(); fd.append(''file'', file); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {''Content-Type'': undefined} }) .success(function(){ }) .error(function(){ }); }


En Angular 6, puedes hacer esto:

En su archivo de servicio:

function_name(data) { const url = `the_URL`; let input = new FormData(); input.append(''url'', data); // "url" as the key and "data" as value return this.http.post(url, input).pipe(map((resp: any) => resp)); }

En el archivo component.ts: en cualquier función digamos xyz,

xyz(){ this.Your_service_alias.function_name(data).subscribe(d => { // "data" can be your file or image in base64 or other encoding console.log(d); }); }