Por que enviar um arquivo é tão difícil usando angular? [fechadas]


18

Eu tenho que enviar um arquivo (arquivo muito grande) para um servidor. Estou estudando as opções que tenho e como fazê-lo. Estou usando angular + express + nodejs.

Se eu usar um formulário simples, poderia pegar o arquivo no servidor usando o multer sem nenhum problema. É muito simples O html é apenas um formulário, no qual eu especifico o destino etc. e tudo funciona. O código nodejs também é muito simples e direto.

Assim que tento usar o angular, tudo se torna incrivelmente complicado. Ou seja, eu tenho que usar uma diretiva e ainda tenho problemas com o servidor. Como eu disse, estou usando multer, que exige que os dados sejam "multipart / form-data" e recebo do servidor "Erro: multipart: limite não encontrado"

Existem muitos módulos para carregar arquivos em angular. O que mostra que é um problema recorrente com mais de uma solução. Agora, não quero postar código porque, por isso , perguntei no Stack Overflow . Minha pergunta é mais sutil:

Por que o que pode ser feito com uma forma simples, é tão complicado em angular? Não falo mal. Quero dizer isso de uma maneira 'eu quero entender'.


isso está de alguma forma relacionado à sua pergunta recente no Stack Overflow ? "Como faço para resolver o erro 'Limite não encontrado' e o que isso significa ..."
gnat

2
Sim, é por isso que coloquei o link na pergunta. Mas aqui não quero resolver o problema. Gostaria de saber por que isso é um problema em primeiro lugar.
6265 cauchy

Respostas:


21

Angular é para aplicativos de página única, os formulários são enviados usando o AJAX para evitar que a página seja recarregada. Para enviar formulários de várias partes com o AJAX, seu navegador precisa oferecer suporte FormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModelnão funciona com input [type = "file"], então você deve criar sua própria diretiva. Sua própria diretiva deve ser simples: ao alterar, atualize um Fileobjeto no seu escopo.

Ao enviar seu formulário, crie um FormDataobjeto e adicione seus arquivos usando FormData.setou FormData.append. Você pode enviar seus FormData com $httpou $resource, e depende do navegador para definir o tipo de conteúdo e o limite.

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

angular.identity impede que a Angular faça qualquer coisa em nossos dados (como serializá-los).

Eu recomendo este artigo: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs


3
Gostaria de saber por que a diretiva de arquivo é deixada de fora em angular!
user237944
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.