¿Por qué es tan difícil enviar un archivo usando angular? [cerrado]


18

Tengo que enviar un archivo (archivo muy grande) a un servidor. Estoy estudiando qué opciones tengo y cómo hacerlo. Estoy usando angular + express + nodejs.

Si uso un formulario simple, podría atrapar el archivo en el servidor usando multer sin ningún problema. Es muy simple. El html es solo una forma, en la que especifico el objetivo, etc. y todo funciona. El código de nodejs también es muy simple y directo.

Tan pronto como trato de usar angular, todo se vuelve increíblemente complicado. Es decir, tengo que usar una directiva y todavía tengo problemas con el servidor. Como dije, estoy usando multer, que requiere que los datos sean "multipart / form-data", y obtengo del servidor "Error: Multipart: Límite no encontrado"

Hay muchos módulos para cargar archivos en angular. Lo que demuestra que es un problema recurrente con más de una solución. Ahora, no quiero publicar código porque lo pregunté en Stack Overflow . Mi pregunta es más sutil:

¿Por qué lo que se puede hacer con una forma simple, se vuelve tan complicado en angular? No lo digo en el mal sentido. Lo digo en forma de 'Quiero entender'.


¿está relacionado de alguna manera con su pregunta reciente en Stack Overflow ? "¿Cómo resuelvo el error 'Límite no encontrado' y qué significa ..."
gnat

2
Sí, por eso puse el enlace en la pregunta. Pero aquí no quiero resolver el problema. Me gustaría saber por qué es un problema en primer lugar.
cauchy

Respuestas:


21

Angular es para aplicaciones de una sola página, los formularios se envían utilizando AJAX para evitar que la página se vuelva a cargar. Para enviar formularios multiparte con AJAX, su navegador debe ser compatible FormData(IE10 +): http://caniuse.com/#search=FormData

https://developer.mozilla.org/en-US/docs/Web/API/FormData

ngModelno funciona con input [type = "file"], por lo que debe crear su propia directiva. Su propia directiva debería ser simple: en el cambio, actualice un Fileobjeto en su alcance.

Al enviar su formulario, cree un FormDataobjeto y agregue sus archivos con FormData.seto FormData.append. Puede enviar sus FormData con $httpo $resource, y depende del navegador para configurar el tipo de contenido y el límite.

var formData = new FormData();
formData.append('file', $scope.file);
$http.post('yourUrl', formData, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
}).then(function () {
   // ...
});

angular.identity evita que Angular haga algo con nuestros datos (como serializarlos).

Recomiendo este artículo: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs


3
Me pregunto por qué la directiva de archivo se deja en angular.
user237944
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.