ทำไมการส่งไฟล์จึงใช้งานเชิงมุมได้ยาก [ปิด]

ฉันต้องส่งไฟล์ (ไฟล์ที่มีขนาดใหญ่มาก) ไปยังเซิร์ฟเวอร์ ฉันกำลังศึกษาตัวเลือกสิ่งที่ฉันมีและวิธีการทำ ฉันกำลังใช้เชิงมุม + เอ็กซ์เพรส + โหนด

ถ้าฉันใช้รูปแบบที่เรียบง่ายฉันสามารถจับไฟล์บนเซิร์ฟเวอร์โดยใช้ multer โดยไม่มีปัญหา ง่ายมาก html เป็นเพียงรูปแบบที่ฉันระบุเป้าหมาย ฯลฯ และทุกอย่างทำงานได้ รหัส nodejs นั้นง่ายมากและตรงไปตรงมา

ทันทีที่ฉันพยายามใช้เชิงมุมทุกอย่างจะซับซ้อนอย่างไม่น่าเชื่อ หมายความว่าฉันต้องใช้คำสั่งและยังมีปัญหากับเซิร์ฟเวอร์ อย่างที่ฉันบอกว่าฉันใช้ multer ซึ่งต้องการข้อมูลเป็น "multipart / form-data" และฉันได้รับจากเซิร์ฟเวอร์ "ข้อผิดพลาด: Multipart: ไม่พบขอบเขต"

มีโมดูลมากมายให้โหลดไฟล์เป็นมุม ซึ่งแสดงว่าเป็นปัญหาที่เกิดซ้ำกับโซลูชันมากกว่าหนึ่งรายการ ตอนนี้ฉันไม่ต้องการที่จะโพสต์รหัสเพราะการที่ผมถามที่กองมากเกิน คำถามของฉันลึกซึ้งยิ่งขึ้น:

ทำไมสิ่งที่สามารถทำได้ด้วยรูปแบบที่เรียบง่ายซับซ้อนในเชิงมุม? ฉันไม่ได้ตั้งใจในเรื่องที่ไม่ดี ฉันหมายถึงมันใน 'ฉันต้องการที่จะเข้าใจ' วิธี

Angular สำหรับแอปพลิเคชันหน้าเดียวแบบฟอร์มจะถูกส่งโดยใช้ AJAX เพื่อหลีกเลี่ยงการโหลดหน้าซ้ำ สำหรับการส่งแบบฟอร์มหลายส่วนด้วย AJAX เบราว์เซอร์ของคุณต้องรองรับFormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModelไม่ทำงานกับอินพุต [type = "file"] ดังนั้นคุณต้องสร้างคำสั่งของคุณเอง คำสั่งของคุณเองควรเป็นเรื่องง่าย: เมื่อมีการเปลี่ยนแปลงอัปเดตFileวัตถุในขอบเขตของคุณ

เมื่อส่งแบบฟอร์มของคุณสร้างFormDataวัตถุและเพิ่มไฟล์ของคุณ (s) เพื่อใช้มันหรือFormData.set FormData.appendคุณสามารถส่ง FormData ของคุณด้วย$httpหรือ$resourceและคุณพึ่งเบราว์เซอร์สำหรับการตั้งค่าชนิดเนื้อหาและขอบเขต

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

angular.identity ป้องกันไม่ให้ Angular ทำอะไรกับข้อมูลของเรา (เช่นการทำให้เป็นอันดับ)

ผมขอแนะนำให้บทความนี้: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs