Mengapa mengirim file begitu sulit menggunakan sudut? [Tutup]

18

Saya harus mengirim file (file sangat besar) ke server. Saya sedang mempelajari opsi apa yang saya miliki dan bagaimana melakukannya. Saya menggunakan angular + express + nodejs.

Jika saya menggunakan formulir sederhana, saya bisa menangkap file di server menggunakan multer tanpa masalah. Sangat sederhana. HTML hanya berupa formulir, di mana saya menentukan target dll dan semuanya berfungsi. Kode simpul juga sangat sederhana dan lurus ke depan.

Segera setelah saya mencoba menggunakan sudut, semuanya menjadi sangat rumit. Artinya, saya harus menggunakan arahan, dan masih mengalami masalah dengan server. Seperti yang saya katakan saya menggunakan multer, yang membutuhkan data untuk menjadi "multipart / form-data", dan saya dapatkan dari server "Kesalahan: Multipart: Batas tidak ditemukan"

Ada banyak modul untuk memuat file dalam sudut. Yang menunjukkan itu adalah masalah berulang dengan lebih dari satu solusi. Sekarang, saya tidak ingin memposting kode karena untuk itu saya bertanya di Stack Overflow . Pertanyaan saya lebih halus:

Mengapa apa yang bisa dilakukan dengan bentuk yang sederhana, begitu rumit dalam mendapatkan sudut? Saya tidak bermaksud buruk. Maksud saya dengan cara 'Saya ingin mengerti'.

cauchy
sumber
apakah ini terkait dengan pertanyaan terakhir Anda di Stack Overflow ? "Bagaimana cara mengatasi kesalahan 'Batas tidak ditemukan' dan apa artinya ..."
Agas
2
Ya, itu sebabnya saya menaruh tautan pada pertanyaan. Tapi di sini saya tidak ingin menyelesaikan masalah. Saya ingin tahu mengapa ini merupakan masalah.
cauchy

Jawaban:

21

Angular untuk Aplikasi Halaman Tunggal, formulir dikirim menggunakan AJAX untuk menghindari halaman dimuat ulang. Untuk mengirim formulir multi-bagian dengan AJAX, browser Anda harus mendukung FormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModeltidak bekerja dengan input [type = "file"], jadi Anda harus membuat arahan Anda sendiri. Arahan Anda sendiri harus sederhana: saat perubahan, perbarui Fileobjek pada lingkup Anda.

Saat mengirim formulir Anda, buat a FormData objek dan tambahkan file Anda ke sana menggunakan FormData.setatau FormData.append. Anda dapat mengirim FormData Anda dengan $httpatau $resource, dan Anda mengandalkan browser untuk mengatur tipe konten dan batas.

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

angular.identity mencegah Angular untuk melakukan apa pun pada data kami (seperti membuat serialisasi).

Saya merekomendasikan artikel ini: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Thomas Roch
sumber
3
Saya bertanya-tanya mengapa file direktif ditinggalkan dalam sudut!
user237944