Отправить FormData с другим полем в Angular

У меня есть форма с двумя input text и одной upload . Я должен отправить его на сервер, но у меня есть проблема с конкатенацией файла с текстом. Сервер ожидает ответа:

 "title=first_input" "text=second_input" "file=my_file.pdf" 

Это html :

    

Это controller :

 $scope.title = null; $scope.text = null; $scope.send = function(){ var file = $scope.myFile; var uploadUrl = 'my_url'; blockUI.start(); Add.uploadFileToUrl(file, $scope.newPost.title, $scope.newPost.text, uploadUrl); }; 

Это директива fileModel:

  return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function(){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); }); } }; 

И это Сервис, который вызывает сервер:

  this.uploadFileToUrl = function(file, title, text, uploadUrl){ var fd = new FormData(); fd.append('file', file); var obj = { title: title, text: text, file: fd }; var newObj = JSON.stringify(obj); $http.post(uploadUrl, newObj, { transformRequest: angular.identity, headers: {'Content-Type': 'multipart/form-data'} }) .success(function(){ blockUI.stop(); }) .error(function(error){ toaster.pop('error', 'Errore', error); }); } 

Если я попытаюсь отправить, я получаю сообщение об ошибке 400, и ответ будет следующим: Multipart form parse error - Invalid boundary in multipart: None . Полезная нагрузка запроса: {"title":"sadf","text":"sdfsadf","file":{}}

Не сериализуйте FormData с POST на сервер. Сделай это:

 this.uploadFileToUrl = function(file, title, text, uploadUrl){ var payload = new FormData(); payload.append("title", title); payload.append('text', text); payload.append('file', file); return $http({ url: uploadUrl, method: 'POST', data: payload, //assign content-type as undefined, the browser //will assign the correct boundary for us headers: { 'Content-Type': undefined}, //prevents serializing payload. don't do it. transformRequest: angular.identity }); } 

Затем используйте его:

 MyService.uploadFileToUrl(file, title, text, uploadUrl).then(successCallback).catch(errorCallback); 

Вот полное решение

html-код,

создать текстовые поля для загрузки файлов anf, как показано ниже

  

директивный код

создать директиву filemodel для анализа файла

 .directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function(){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); }); } };}]); 

Код услуги

добавьте файл и поля для формирования данных и сделайте $ http.post, как показано ниже, чтобы сохранить «Content-Type»: undefined

  .service('fileUploadService', ['$http', function ($http) { this.uploadFileToUrl = function(file, username, password, dob, email, uploadUrl){ var myFormData = new FormData(); myFormData.append('file', file); myFormData.append('username', username); myFormData.append('password', password); myFormData.append('dob', dob); myFormData.append('email', email); $http.post(uploadUrl, myFormData, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function(){ }) .error(function(){ }); } }]); 

В controllerе

Теперь в controllerе вызов службы, посылая необходимые данные, добавляемые в параметры,

 $scope.saveData = function(model){ var file = model.myFile; var uploadUrl = "/api/createUsers"; fileUpload.uploadFileToUrl(file, model.username, model.password, model.dob, model.email, uploadUrl); }; 

Вы отправляете данные в формате JSON на сервер, который не ожидает этого формата. Вы уже предоставили формат, который нужен серверу, поэтому вам нужно отформатировать его самостоятельно, что довольно просто.

 var data = '"title='+title+'" "text='+text+'" "file='+file+'"'; $http.post(uploadUrl, data) 

Это никогда не сработает, вы не можете укрепить свой объект FormData.

Вы должны сделать это:

 this.uploadFileToUrl = function(file, title, text, uploadUrl){ var fd = new FormData(); fd.append('title', title); fd.append('text', text); fd.append('file', file); $http.post(uploadUrl, obj, { transformRequest: angular.identity, headers: {'Content-Type': undefined} }) .success(function(){ blockUI.stop(); }) .error(function(error){ toaster.pop('error', 'Errore', error); }); } 

Используя $resource в AngularJS, вы можете:

task.service.js

 $ngTask.factory("$taskService", [ "$resource", function ($resource) { var taskModelUrl = 'api/task/'; return { rest: { taskUpload: $resource(taskModelUrl, { id: '@id' }, { save: { method: "POST", isArray: false, headers: {"Content-Type": undefined}, transformRequest: angular.identity } }) } }; } ]); 

И затем используйте его в модуле:

task.module.js

 $ngModelTask.controller("taskController", [ "$scope", "$taskService", function ( $scope, $taskService, ) { $scope.saveTask = function (name, file) { var newTask, payload = new FormData(); payload.append("name", name); payload.append("file", file); newTask = $taskService.rest.taskUpload.save(payload); // check if exists } } 
  • jQuery ajax upload с индикатором выполнения - без вспышки
  • Как использовать getJSON, отправляя данные с помощью метода post?
  • Что означает этот звуковой сигнал?
  • Является ли моя новая графическая карта причиной моего ПК?
  • Создать простой HTTP-сервер с Java?
  • POST запрос отправить json данные java HttpUrlConnection
  • MVC публикует список сложных объектов
  • Параметры сообщения Volley JsonObjectRequest больше не работают
  • Можно ли кэшировать методы POST в HTTP?
  • Httpclient 4, ошибка 302. Как перенаправить?
  • Как я могу получить сообщение об ошибке запроса Ajax?
  • Interesting Posts

    Тестирование модhive с помощью Spring Security

    добавление пользовательских вершин в графу форсирования

    java.lang.ClassFormatError: Отсутствует атрибут кода в методе, который не является родным или абстрактным в файле classа javax / mail / MessagingException

    Как проверить, работает ли в streamе пользовательского интерфейса в Android?

    Альтернативный DNS-сервер, который не разрешает после первого, не разрешает

    Есть ли у R такие операторские операции, как Perl qw ()?

    Изменение размера столбцов SubGrid при изменении размера основной сетки

    Что обычно лучше всего использовать – StringComparison.OrdinalIgnoreCase или StringComparison.InvariantCultureIgnoreCase?

    Использование String Format для отображения десятичной до 2-х мест или простого целого

    Компьютер Windows 10 не может подключиться к другому компьютеру в сети

    Как сделать Eclipse более привлекательным для вкладок?

    Поиск цитируемых строк с экранированными кавычками в C # с использованием регулярного выражения

    Показывать индикатор выполнения при выполнении некоторой работы на C #?

    Конструктор по умолчанию с пустыми скобками

    Как маршрутизировать трафик через определенный прокси-сервер SOCKS для каждого приложения?

    Давайте будем гением компьютера.