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