Spring MVC - AngularJS - Загрузка файла - org.apache.commons.fileupload.FileUploadException

Ответ 1

Я столкнулся с той же проблемой и столкнулся с той же проблемой даже после обновления transformRequest. "Как-то, граница заголовка, похоже, не установлена ​​правильно.

Следуя http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs, проблема решена. Выдержка из местоположения....

Установив "Content-Type: undefined, браузер задает нам Content-Type для multipart/form-data и заполняет правильную границу. Ручная настройка" Content-Type: multipart/form-data не сможет заполнить граничный параметр запроса.

Не уверен, что это помогает любому, но, возможно, облегчает людям, смотрящим на этот пост... По крайней мере, это делает его менее трудным.

Ответ 2

Введение

У меня была такая же проблема, и я нашел полное решение для отправки как json, так и файла с angular на страницу Spring MVC-метода.

Основная проблема - $http, который не отправляет правильный заголовок Content-type (я объясню, почему).

Теория многочастных/форм-данных

Чтобы отправить как json, так и файл, нам нужно отправить multipart/form-data, что означает "мы отправляем разные элементы в теле, разделенные специальным разделителем". Этот специальный разделитель называется "границей", который является строкой, которая отсутствует в любом из элементов, которые будут отправлены.

Серверу необходимо знать, какая граница используется, поэтому он должен указываться в заголовке Content-type (Content-Type multipart/form-data; border = $the_boundary_used).

Итак... нужны две вещи:

• В заголовке → укажите multipart/form-data AND, где используется граница (здесь используется ошибка $http)
• В теле → разделяйте каждый параметр запроса с помощью границы

Пример хорошего запроса:

заголовок

Content-Type    multipart/form-data; boundary=---------------------------129291770317552

Что говорит серверу "Я отправляю многостраничное сообщение со следующим разделителем (границей): --------------------------- 129291770317552

Тело

-----------------------------129291770317552 Content-Disposition: form-data; name="clientInfo" 
{ "name": "Johny", "surname":"Cash"} 

-----------------------------129291770317552 
Content-Disposition: form-data; name="file"; filename="yourFile.pdf"           
Content-Type: application/pdf 
%PDF-1.4 
%õäöü 
-----------------------------129291770317552 --

Где мы отправляем 2 аргумента, "clientInfo" и "файл", разделенные границей.

Проблема

Если запрос отправлен с $http, граница не отправляется в заголовке (точка 1), поэтому Spring не может обрабатывать данные (он не знает, как разделить "части" запрос).

Другая проблема заключается в том, что граница известна только FormData... но FormData не имеет аксессуаров, поэтому невозможно узнать, какая граница используется!!!

Решение

Вместо использования $http в js вы должны использовать стандартный XMLHttpRequest, что-то вроде:

//create form data to send via POST
var formData=new FormData();

console.log('loading json info');
formData.append('infoClient',angular.toJson(client,true)); 
// !!! when calling formData.append the boundary is auto generated!!!
// but... there is no way to know which boundary is being used !!!

console.log('loading file);
var file= ...; // you should load the fileDomElement[0].files[0]
formData.append('file',file);

//create the ajax request (traditional way)
var request = new XMLHttpRequest();
request.open('POST', uploadUrl);
request.send(formData);

Затем в вашем методе Spring у вас может быть что-то вроде:

@RequestMapping(value = "/", method = RequestMethod.POST)
public @ResponseBody Object newClient(
        @RequestParam(value = "infoClient") String infoClientString,
        @RequestParam(value = "file") MultipartFile file) {

    // parse the json string into a valid DTO
    ClientDTO infoClient = gson.fromJson(infoClientString, ClientDTO.class);
    //call the proper service method
    this.clientService.newClient(infoClient,file);

    return null;

}

Ответ 3

Ответ Carlos Verdes не работал с моим перехватчиком $http, который добавляет заголовки авторизации и так далее. Поэтому я решил добавить его решение и создать шахту, используя $http.

Clientside Angular (1.3.15)

Моя форма (с использованием синтаксиса controllerAs) предполагает файл и простой объект, содержащий информацию, которую нам нужно отправить на сервер. В этом случае я использую простое имя и тип Строка.

<form>
    <input type="text" ng-model="myController.myObject.name" />

     <select class="form-control input-sm" ng-model="myController.myObject.type"
      ng-options="type as type for type in myController.types"></select>

     <input class="input-file" file-model="myController.file" type="file">

</form>

Первым шагом было создание директивы, которая связывает мой файл с областью действия назначенного контроллера (в данном случае myController), чтобы я мог получить к нему доступ. Привязка его непосредственно к модели в вашем контроллере не будет работать, поскольку входной тип = файл не является встроенной функцией.

.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]);
                });
            });
        }
    };
}]);

Во-вторых, я создал factory с именем myObject с созданием метода экземпляра, который позволяет мне преобразовывать данные при вызове create на сервере. Этот метод добавляет все в объект FormData и преобразует его с помощью метода transformRequest (angular.identity). Крайне важно настроить заголовок на undefined. (В старых версиях Angular может потребоваться установка undefined). Это позволит автоматически установить мультидатный/пограничный маркер (см. Сообщение Карлоса).

  myObject.prototype.create = function(myObject, file) {
        var formData = new FormData();
        formData.append('refTemplateDTO', angular.toJson(myObject));
        formData.append('file', file);

        return $http.post(url, formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined }
        });
}

Все, что остается на стороне клиента, создает экземпляр new myObject в myController и вызывает метод create в функции создания контроллера при отправке моей формы.

this.myObject = new myObject();

this.create = function() {
        //Some pre handling/verification
        this.myObject.create(this.myObject, this.file).then(
                              //Do some post success/error handling
                            );
    }.bind(this);

Сервер Spring (4.0)

В RestController теперь я могу просто сделать следующее: (Предположим, у нас есть POJO MyObject)

@RequestMapping(method = RequestMethod.POST)
@Secured({ "ROLE_ADMIN" }) //This is why I needed my $httpInterceptor
public void create(MyObject myObject, MultipartFile file) {
     //delegation to the correct service
}

Обратите внимание: я не использую параметры requestparameters, но просто позволяю Spring преобразовывать JSON в POJO/DTO. Убедитесь, что вы правильно настроили MultiPartResolver bean и добавили в свой pom.xml. (И Jackson-Mapper при необходимости)

spring -context.xml

<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="268435456" /> <!-- 256 megs -->
</bean>

pom.xml

<dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>${commons-fileupload.version}</version> 
</dependency>

Ответ 4

Вы можете попробовать это

.js

$scope.uploadFile=function(){
    var formData=new FormData();
    formData.append("file",file.files[0]);
    $http.post('/serverApp/rest/newDocument', formData, {
        transformRequest: function(data, headersGetterFunction) {
            return data;
        },
        headers: { 'Content-Type': undefined }
        }).success(function(data, status) {                       
            alert("Success ... " + status);
        }).error(function(data, status) {
            alert("Error ... " + status);
        });

.java

@Controller
public class DocumentUploadController {
@RequestMapping(value="/newDocument", method = RequestMethod.POST)
    public @ResponseBody void UploadFile(@RequestParam(value="file", required=true) MultipartFile file) {
        String fileName=file.getOriginalFilename();
        System.out.println(fileName);
    }
}

Это на основе https://github.com/murygin/rest-document-archive

Есть хороший пример загрузки файла https://murygin.wordpress.com/2014/10/13/rest-web-service-file-uploads-spring-boot/