Tại sao gửi một tập tin rất khó sử dụng góc? [đóng cửa]

Tôi phải gửi một tệp (tệp rất lớn) đến một máy chủ. Tôi đang nghiên cứu những lựa chọn tôi có và làm thế nào để làm điều đó. Tôi đang sử dụng angular + express + nodejs.

Nếu tôi sử dụng một hình thức đơn giản, tôi có thể bắt tệp trên máy chủ bằng cách sử dụng multer mà không gặp vấn đề gì. Rất đơn giản. Html chỉ là một hình thức, trong đó tôi chỉ định mục tiêu, v.v. và mọi thứ đều hoạt động. Mã nodejs cũng rất đơn giản và dễ hiểu.

Ngay khi tôi cố gắng sử dụng góc cạnh, mọi thứ trở nên phức tạp đến khó tin. Có nghĩa là tôi phải sử dụng một lệnh và vẫn gặp sự cố với máy chủ. Như tôi đã nói tôi đang sử dụng multer, yêu cầu dữ liệu phải là "nhiều dữ liệu / biểu mẫu dữ liệu" và tôi nhận được từ máy chủ "Lỗi: Đa mục: Không tìm thấy ranh giới"

Có nhiều mô-đun để tải các tập tin trong góc. Điều đó cho thấy đó là một vấn đề tái diễn với nhiều hơn một giải pháp. Bây giờ, tôi không muốn đăng mã vì tôi đã hỏi tại Stack Overflow . Câu hỏi của tôi tinh tế hơn:

Tại sao những gì có thể được thực hiện với một hình thức đơn giản, rất phức tạp trong góc cạnh? Tôi không có ý đó theo một cách xấu. Ý tôi là nó theo cách 'tôi muốn hiểu'.

Angular dành cho Ứng dụng Trang đơn, các biểu mẫu được gửi bằng AJAX để tránh trang được tải lại. Để gửi biểu mẫu nhiều phần bằng AJAX, trình duyệt của bạn cần hỗ trợ FormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModelkhông hoạt động với đầu vào [type = "file"], vì vậy bạn phải tạo chỉ thị của riêng mình. Chỉ thị của riêng bạn nên đơn giản: thay đổi, cập nhật một Fileđối tượng trên phạm vi của bạn.

Khi gửi biểu mẫu của bạn, hãy tạo một FormDatađối tượng và thêm (các) tệp của bạn vào đó bằng cách sử dụng FormData.sethoặc FormData.append. Bạn có thể gửi FormData của mình bằng $httphoặc $resource, và bạn đang dựa vào trình duyệt để đặt loại nội dung và ranh giới.

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

angular.identity ngăn Angular làm bất cứ điều gì trên dữ liệu của chúng tôi (như tuần tự hóa nó).

Tôi đề xuất bài viết này: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs