Perché inviare un file è così difficile usando l'angolare? [chiuso]


18

Devo inviare un file (file molto grande) a un server. Sto studiando quali opzioni ho e come farlo. Sto usando angular + express + nodejs.

Se utilizzo un modulo semplice, potrei catturare il file sul server usando il multer senza problemi. È molto semplice. L'html è solo un modulo, in cui specifico il target ecc. E tutto funziona. Il codice nodejs è anche molto semplice e diretto.

Non appena provo ad usare l'angolazione, tutto diventa incredibilmente complicato. Significato, devo usare una direttiva e ho ancora problemi con il server. Come ho già detto, sto usando il multer, che richiede che i dati siano "multipart / form-data" e ottengo dal server "Errore: Multipart: confine non trovato"

Esistono molti moduli per caricare i file in angolare. Ciò dimostra che si tratta di un problema ricorrente con più di una soluzione. Ora, non voglio pubblicare codice perché per questo ho chiesto a StackTranslate.it . La mia domanda è più sottile:

Perché cosa si può fare con un semplice modulo, diventare così complicato in angolare? Non lo dico male. Lo intendo in un modo "Voglio capire".


questo è in qualche modo correlato alla tua recente domanda su Stack Overflow ? "Come posso risolvere l'errore" Confine non trovato "e cosa significa ..."
moscerino del

2
Sì, ecco perché ho messo il link sulla domanda. Ma qui non voglio risolvere il problema. Vorrei sapere perché è un problema in primo luogo.
cauchy,

Risposte:


21

Angolare è per le applicazioni a pagina singola, i moduli vengono inviati utilizzando AJAX per evitare che la pagina venga ricaricata. Per inviare moduli multipart con AJAX, il tuo browser deve supportare FormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModelnon funziona con input [type = "file"], quindi devi creare la tua direttiva. La tua direttiva dovrebbe essere semplice: in caso di modifica, aggiorna un Fileoggetto nel tuo ambito.

Quando invii il modulo, crea un FormDataoggetto e aggiungi i tuoi file utilizzando FormData.seto FormData.append. Puoi inviare i tuoi FormData con $httpo $resourcee stai facendo affidamento sul browser per impostare il tipo di contenuto e il 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 impedisce ad Angular di fare qualsiasi cosa sui nostri dati (come serializzarli).

Consiglio questo articolo: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs


3
Mi chiedo perché la direttiva sui file sia lasciata fuori in angolare!
user237944
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.