Spring MVC - AngularJS - Загрузка файла - org.apache.commons.fileupload.FileUploadException
У меня есть веб-приложение Java Spring MVC в качестве сервера. И приложение AngularJS в качестве клиента.
В AngularJS я должен загрузить файл и отправить на сервер.
Вот мой HTML
<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data">
<input type="file" name="file" ng-model="document.fileInput" id="file" onchange="angular.element(this).scope().setTitle(this)" />
<input type="text" class="col-sm-4" ng-model="document.title" id="title" />
<button class="btn btn-primary" type="submit">
Submit
</button>
</form>
Вот мой UploadController.js
'use strict';
var mainApp=angular.module('mainApp', ['ngCookies']);
mainApp.controller('FileUploadController', function($scope, $http) {
$scope.document = {};
$scope.setTitle = function(fileInput) {
var file=fileInput.value;
var filename = file.replace(/^.*[\\\/]/, '');
var title = filename.substr(0, filename.lastIndexOf('.'));
$("#title").val(title);
$("#title").focus();
$scope.document.title=title;
};
$scope.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
$http({
method: 'POST',
url: '/serverApp/rest/newDocument',
headers: { 'Content-Type': 'multipart/form-data'},
data: formData
})
.success(function(data, status) {
alert("Success ... " + status);
})
.error(function(data, status) {
alert("Error ... " + status);
});
};
});
Собирается на сервер. Вот мой DocumentUploadController.java
@Controller
public class DocumentUploadController {
@RequestMapping(value="/newDocument", headers = "'Content-Type': 'multipart/form-data'", method = RequestMethod.POST)
public void UploadFile(MultipartHttpServletRequest request, HttpServletResponse response) {
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
System.out.println(fileName);
}
}
Когда я запускаю это, я получаю следующее исключение
org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found] with root cause
org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:954)
at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:351)
at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
at org.springframework.web.multipart.commons.CommonsMultipartResolver.parseRequest(CommonsMultipartResolver.java:156)
at org.springframework.web.multipart.commons.CommonsMultipartResolver.resolveMultipart(CommonsMultipartResolver.java:139)
at org.springframework.web.servlet.DispatcherServlet.checkMultipart(DispatcherServlet.java:1047)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:892)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:856)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:920)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:827)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:647)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:801)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:728)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:953)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:408)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1023)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:589)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:744)
В моем applicationContext.xml я упомянул
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="100000" />
</bean>
я использую
spring - 3.2.1.RELAESE
commons-fileupload - 1.2.2
commons-io - 2.4
Как это решить?
Было бы замечательно, если бы кто-нибудь сказал мне, как отправить файл и другие форм-данные из angularJS и получить их на сервере.
ОБНОВЛЕНИЕ 1
@Michael: я вижу это только в консоли, когда нажимаю на кнопку отправить.
POST http://localhost:9000/serverApp/rest/newDocument 500 (Internal Server Error) angular.js:9499
(anonymous function) angular.js:9499
sendReq angular.js:9333
$http angular.js:9124
$scope.uploadFile invoice.js:113
(anonymous function) angular.js:6541
(anonymous function) angular.js:13256
Scope.$eval angular.js:8218
Scope.$apply angular.js:8298
(anonymous function) angular.js:13255
jQuery.event.dispatch jquery.js:3074
elemData.handle
Мой сервер работает в другом порту 8080. Я использую йомен, хрюканье и бауэр. Настолько тонкий gruntfile.js, что я упомянул порт сервера. Таким образом, он идет на сервер и работает, и выдает исключение
ОБНОВЛЕНИЕ 2
Граница не устанавливается
Request URL:http://localhost:9000/serverApp/rest/newDocument
Request Method:POST
Status Code:500 Internal Server Error
Request Headers view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:792
Content-Type:multipart/form-data
Cookie:ace.settings=%7B%22sidebar-collapsed%22%3A-1%7D; isLoggedIn=true; loggedUser=%7B%22name%22%3A%22admin%22%2C%22password%22%3A%22admin23%22%7D
Host:localhost:9000
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundaryCWaRAlfQoZEBGofY
Content-Disposition: form-data; name="file"; filename="csv.csv"
Content-Type: text/csv
------WebKitFormBoundaryCWaRAlfQoZEBGofY--
Response Headers view source
connection:close
content-length:5007
content-type:text/html;charset=utf-8
date:Thu, 09 Jan 2014 11:46:53 GMT
server:Apache-Coyote/1.1
4 ответа
Я столкнулся с той же проблемой и столкнулся с той же проблемой даже после обновления transformRequest. "Каким-то образом, граница заголовка, кажется, не установлена правильно.
После http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs проблема решена. Выписка из локации....
Установив "Content-Type": не определено, браузер устанавливает для нас Content-Type multipart/form-data и заполняет правильную границу. Установка "Content-Type" вручную: multipart/form-data не сможет заполнить граничный параметр запроса.
Не уверен, поможет ли это кому-нибудь, но, возможно, облегчит людям просмотр этого поста... По крайней мере, это сделает его менее трудным.
Вступление
У меня была та же проблема, и я нашел полное решение для отправки как json, так и файла со страницы на основе углов в метод Spring MVC.
Основная проблема - $http, который не отправляет правильный заголовок Content-type (я объясню почему).
Теория о multipart/form-data
Чтобы отправить как json, так и файл, нам нужно отправить multipart/form-data, что означает "мы отправляем разные элементы в теле, разделенные специальным разделителем". Этот специальный разделитель называется "граница", то есть строка, которой нет ни в одном из элементов, которые будут отправлены.
Сервер должен знать, какая граница используется, поэтому он должен быть указан в заголовке типа контента (multipart/form-data типа контента; border =$the_boundary_used).
Итак... нужны две вещи:
- В заголовке -> укажите multipart/form-data И какая граница используется (здесь, где $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" и "file" разделены границей.
Эта проблема
Если запрос отправляется с помощью $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;
}
Ответ Карлоса Вердеса не сработал с моим перехватчиком $http, который добавляет заголовки авторизации и так далее. Поэтому я решил добавить к его решению и создать свое, используя $http.
Уголок клиента (1.3.15)
Моя форма (с использованием синтаксиса controllerAs) предполагает наличие файла и простого объекта, содержащего информацию, которую мы должны отправить на сервер. В этом случае я использую простое имя и свойство типа String.
<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]);
});
});
}
};
}]);
Во-вторых, я создал фабрику myObject с методом экземпляра create, который позволяет мне преобразовывать данные при вызове create на сервере. Этот метод добавляет все к объекту FormData и преобразует его с помощью метода transformRequest ( angular.identity). Крайне важно установить заголовок на неопределенный. (Старые версии Angular могут требовать установки чего-то, кроме неопределенного). Это позволит автоматически установить маркер мультиданных / границ (см. Сообщение Карлоса).
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 }
});
}
Все, что остается сделать на стороне клиента, - это создание нового myObject в myController и вызов метода create в функции 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);
Серверная весна (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
}
Обратите внимание, я не использую параметры запроса, а просто позволяю Spring выполнять преобразование JSON в POJO/DTO. Убедитесь, что вы правильно настроили компонент MultiPartResolver и добавили его в ваш pom.xml. (И Джексон-Маппер при необходимости)
весна-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>
Вы можете попробовать это
.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);
});
.Джава
@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);
}
}
That's based on https://github.com/murygin/rest-document-archive
There is a good example of file upload https://murygin.wordpress.com/2014/10/13/rest-web-service-file-uploads-spring-boot/