Чому надсилання файлу настільки складно за допомогою кутового? [зачинено]


18

Я маю надіслати файл (дуже великий файл) на сервер. Я вивчаю, які у мене варіанти і як це зробити. Я використовую angular + express + nodejs.

Якщо я використовую просту форму, я можу без проблем вловити файл на сервері, використовуючи мультер. Дуже просто. HTML - це просто форма, в якій я вказую ціль тощо, і все працює. Код nodejs також дуже простий і прямий вперед.

Як тільки я намагаюся використовувати кутовий, все стає неймовірно складним. Значить, я повинен використовувати директиву, і все ще виникають проблеми з сервером. Як я вже говорив, я використовую мультер, який вимагає, щоб дані були "multipart / form-data", і я отримую з сервера "Помилка: Multipart: Межа не знайдена"

Існує багато модулів для завантаження файлів у кутовій формі. Що показує, що це повторювана проблема з більш ніж одним рішенням. Тепер я не хочу надсилати код, тому що про це я запитав у Stack Overflow . Моє запитання є більш тонким:

Чому те, що можна зробити за допомогою простої форми, отримати таке складне у кутовому? Я не маю на увазі це погано. Я маю на увазі це так, як я хочу зрозуміти.


це якимось чином пов’язане з вашим останнім запитанням в Stack Overflow ? "Як вирішити помилку" Межа не знайдена "і що це означає ..."
gnat

2
Так, саме тому я поставив посилання на питання. Але тут я не хочу вирішувати проблему. Мені хотілося б дізнатися, чому це проблема в першу чергу.
качан

Відповіді:


21

Кутова призначена для додатків на одній сторінці, форми надсилаються за допомогою AJAX, щоб уникнути перезавантаження сторінки. Щоб надсилати багаточастинні форми за допомогою AJAX, ваш браузер повинен підтримувати FormData(IE10 +): http://caniuse.com/#search=FormData

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

ngModelне працює з input [type = "file"], тому вам доведеться створити власну директиву. Ваша власна директива повинна бути простою: змінити, оновити Fileоб’єкт у вашому обсязі.

Відправляючи форму, створіть FormDataоб’єкт і додайте до нього свої файли, використовуючи 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


3
Цікаво, чому директива щодо файлів залишається у куті!
user237944
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.