6

Quiero subir un archivo en usando post multipart, en el lado del servidor uso 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.

1
  • 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. Commented el 2 feb. 2016 a las 15:36

2 respuestas 2

2

Recuerdo en jquery haber usado la librería

jQuery File Upload Angular

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

Documentation Overview

2

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.

2
  • me sirivio tu codigo de angularjs pero como hago para saber que me responde el server ?
    – hola mundo
    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.
    – devconcept
    Commented el 28 nov. 2018 a las 16:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.