javascript - imagen - cómo subir archivos usando Angularjs, multipart/form-data
subir imagen angular 4 (2)
Quiero subir imágenes usando Angularjs. Alguien sabe cómo hacer esto. La API de RESTO quiere
Content-Type: multipart / form-data
www.abc.com/images/id
Request Body
{
// --Boundary_1_1626119499_1392398808202
// Content-Type: image/png
// Content-Disposition: form-data; filename="ducky.png"; modification-date="Wed, 05 Nov 2016 19:53:17 GMT"; size=713915; name="upload_image"
// {binary data truncated for display}
}
mi pregunta es cómo cargar el archivo de imagen usando el API de descanso anterior, cómo asignar $ scope.tempObject = my Cargar imagen de ruta
$scope.UploadImage = function () {
var config = {headers: {
''Content-Type'': ''multipart/form-data''
}
}
$http.post(properties.customerUploadImage_path + "/"+checkprofile,$scope.tempObject,config).success(function (response) {
Console.log(''Uploaded'');
});
}
Creo que no usas $http la manera correcta.
Puede usar el atributo de headers del servicio $http , como este:
$scope.UploadImage = function () {
var config = {
headers: {
''Content-Type'': ''multipart/form-data'',
}
};
$http({
method: ''POST'',
url: properties.customerUploadImage_path + "/" + checkprofile,
data: $scope.tempObject,
config: config,
}).success(function (response) {
console.log(''Uploaded'');
});
};
Te sugiero que eches un vistazo a la documentación .
Configure los encabezados con "Content-Type": undefined y use la API de FormData:
var config = { headers: {
"Content-Type": undefined,
}
};
vm.upload = function() {
var formData = new $window.FormData();
formData.append("file-0", vm.files[0]);
$http.post(url, formData, config).
then(function(response) {
vm.result = "SUCCESS";
}).catch(function(response) {
vm.result = "ERROR "+response.status;
});
};
Normalmente, el servicio AngularJS $ http usa Content-Type: application/json . Al configurar Content-Type: undefined , el framework omite el encabezado Content-Type y el navegador usará su tipo de contenido predeterminado que es multipart/form-data para objetos FormData.
Encabezado de solicitud
POST /post HTTP/1.1
Host: httpbin.org
Connection: keep-alive
Content-Length: 388298
Accept: application/json, text/plain, */*
Origin: https://run.plnkr.co
User-Agent: Mozilla/5.0 Chrome/55.0.2883.54 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9lBDT4yoh8lKWtIH
Referer: https://run.plnkr.co/cW228poRVzWs67bT/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Solicitud de carga
------WebKitFormBoundary9lBDT4yoh8lKWtIH
Content-Disposition: form-data; name="file-0"; filename="Crop.jpg"
Content-Type: image/jpeg
------WebKitFormBoundary9lBDT4yoh8lKWtIH--
La DEMO en PLNKR .
Para más información, ver,