【发布时间】：2015-09-14 09:21:50
【问题描述】：
我试图使用 angular js 和 spring mvc 上传多个输入类型的文件，其中 multi="true" 但我从服务器收到异常是“请求被拒绝，因为没有找到多部分边界”
这里我会把我的代码放在下面
我的jsp是
<html ng-app="myApp">
<body>
<div ng-controller="controller">
<input type="submit" name="submit" value="add" ng-click="add();" />
<form name="form" id="form" ng-submit="submitRecord(blog)" enctype="multipart/form-data" >
<div id="outerdiv" name="outerdiv">
</div>
</form>
</div>
</body>
</html>
这里我是在单击添加后从角度控制器生成输入元素，输入控件在“”中生成。
我的角度控制器是
'use strict';
var App = angular.module('TechnoBlogs', ['ngRoute','ui.router']);
var $injector = angular.injector(['ng']);
App.config(['$httpProvider', function ($httpProvider) {
/*$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';*/
}],['$routeProvider',function($routeProvider){
$routeProvider.
when('/create', {
templateUrl: '/',
controller: 'controller'
});
}]);
var currentg1=0;
var controller = function($scope,$http,fileService){
$scope.blog = [];
/*var currentg1=0;*/
$scope.blog.desc=[];
$scope.blog.desccode=[];
$scope.blog.descimg=[];
$scope.add=function(){
var $div = angular.element("<br><div><label id='desc["+currentg1+"]' for='desc["+currentg1+"]'>Description"+currentg1+"<span style='color: red;''>*</span></label><textarea rows='3' cols='6' id='desc["+currentg1+"]' name='desc["+currentg1+"]' ng-model='blog.desc["+currentg1+"]' required='required'></textarea> </div><br><div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]' multiple/></div>");
var e=document.getElementById("outerdiv");
angular.element(e).append($div).injector().invoke(function($compile) {
var scope = angular.element($div).scope();
$compile($div)(scope);
});
currentg1++;
};
$scope.submitRecord=function(blog){
var fd = new FormData();
var files=[];
for(var i=0;i<currentg1;i++)
{
files[i] = fileService.getFile("descimg["+i+"]");
console.log("files["+i+"] ---> "+files[i]);
}
fd.append("files",files);
alert(fd);
console.log("--->>> "+files);
$http.post("saveblog",fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(){
alert("success");
})
};
};
App.service('fileService', function () {
var file = {};
var fileService = {};
fileService.getFile = function (name) {
return file[name];
};
fileService.setFile = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
file[name] = [];
file[name][index] = newFile;
};
return fileService;
})
App.directive('myFileUpload', function (fileService) {
return function (scope, element, attrs) {
element.bind('change', function () {
var index;
var index_file = 0;
for (index = 0; index < element[0].files.length; index++) {
fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
index_file++;
}
index_file = 0;
});
}
});
我的弹簧控制器是
@RequestMapping(value="/saveblog", method=RequestMethod.POST, headers = "'Content-Type': 'multipart/form-data'")
public void saveblog(MultipartHttpServletRequest request, HttpServletResponse response)
{
System.out.println("in multipart ");
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
System.out.println(fileName);
}
我还为多部分创建了一个 bean
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="2097152" />
</bean>
之后仍然有异常
我的响应头是
HTTP/1.1 404 Not Found
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Language: en
Content-Length: 949
我的请求头是
POST /technoblogs/blog/saveblog HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 209
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7uIEu9ax8IY8nCde
Referer: http://localhost:8080/technoblogs/blog/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: JSESSIONID=61816E4AB7F6905F688755CF22BC16FF
【问题讨论】：
标签： angularjs spring spring-mvc