Quiero subir un archivo en angular usando post multipart
, en el lado del servidor uso nginx como balanceador de carga conectado a varios servidores de aplicaciones y no sé si al hacer esto envíe las diferentes partes del archivo a diferentes servidores de aplicaciones.
-
un POST multi-part va en una solicitud única, con separaciones entre las partes, quizá te confundas con un upload en bloques, que si son conexiones por separado. Asi, no hay ningún problema.– rnrneverdiesCommented el 2 feb. 2016 a las 15:36
2 respuestas
Recuerdo en jquery
haber usado la librería
jQuery File Upload Plugin - AngularJS Fork
pero tambien tiene implementacion para Angular
, como observas hay una directiva que podrías utilizar.
Revisa en la documentación porque menciona a Nginx
La opción recomendada es que uses un plugin
https://github.com/danialfarid/ng-file-upload
https://github.com/leon/angular-upload
Tambien puedes usar el módulo $http
para hacer tu petición usando FormData con el pequeño inconveniente que no podrás soportar navegadores viejos ej: IE 8 y 9. Los plugins mencionados anteriormente tienen un soporte para hacer uploads en esos navegadores además de una gran cantidad adicional de funcionalidad por eso te los recomiendo.
Aqui te pongo un ejemplo de como hacerlo usando el módulo $http
angular.module('app', [])
.controller('FileUploadController', ['$scope', '$http',
function($scope, $http) {
$scope.file = '';
$scope.sendFile = function() {
$http.post('/api/myurl', $scope.file, {
headers: {
'Content-Type': undefined
}
});
};
}
])
.directive('fileChanged', function() {
return {
restrict: 'A',
scope: {
model: '=',
prop: '@'
},
link: function(scope, element) {
function changeEvt(evt) {
var fd = new FormData();
fd.append(scope.prop || 'myFile', evt.target.files[0]);
scope.$apply(function() {
scope.model = fd;
});
}
element.on('change', changeEvt);
scope.$on('$destroy', function() {
element.off('change', changeEvt);
})
}
}
});
.boton {
border-radius: 6px;
padding: 10px;
border: solid 1px gray;
color: white;
background-color: #337AB7;
}
.boton:disabled {
background-color: lightslategray;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FileUploadController">
<form ng-submit="sendFile()">
<div>
<label for="up">Seleccione un fichero</label>
</div>
<div>
<input id="up" type="file" file-changed model="file">
</div>
<br>
<div>
<button type="submit" class="boton" ng-disabled="!file">Enviar</button>
</div>
</form>
</div>
Esta es la forma "angular puro" de enviar un fichero.
Si te fijas tuve que usar una directiva porque angular no le da soporte a los input de tipo file
con ng-model
así que una directiva es la forma de capturar el fichero que se introduce en el input y bindearlo a tu $scope
. Yo aprovecho y en lugar de bindear el contenido del fichero le pongo ya el objecto FormData
listo para enviar, ya que FormData
permite agregar objetos File
directamente pero esto es sólo uno de los ejemplos de como hacerlo; evidentemente un plugin puede brindarte muchas mas opciones.
-
me sirivio tu codigo de angularjs pero como hago para saber que me responde el server ? Commented el 28 nov. 2018 a las 2:33
-
@holamundo Te recomiendo que hagas una pregunta nueva en este sitio ya que eso depende de que tecnología de servidor estás usando. Commented el 28 nov. 2018 a las 16:10