如何使用angular js spring mvc上传多部分文件

我正在尝试使用angularjs和spring MVC上传文件

我在application-context.xml中有一个multipartResolver bean。

我的表格看起来像这样：

 
 
 Quote Identifier :  
  Choose  
 
 
 Please upload the file : *  
  
 Valid File  Invalid File 
 
 
   Continue  
 
 
 $scope.continueFileUpload=function (){ var uploadUrl=serverUrl+"continueFileUpload"; var formData=new FormData(); formData.append("file",file.files[0]); $http({ method: 'POST', url: uploadUrl, headers: {'Content-Type': false}, data: formData, transformRequest: function(data, headersGetterFunction) { return data; } }) .success(function(data, status) { alert("success"); }) }; 

弹簧控制器：

 @Controller public class FileUploadController { @RequestMapping(value = "/continueFileUpload", method = RequestMethod.POST) @ResponseBody public String continueFileUpload(HttpServletRequest request, HttpServletResponse response){ MultipartHttpServletRequest mRequest; try { mRequest = (MultipartHttpServletRequest) request; mRequest.getParameterMap(); Iterator itr = mRequest.getFileNames(); while (itr.hasNext()) { MultipartFile mFile = mRequest.getFile(itr.next()); String fileName = mFile.getOriginalFilename(); System.out.println(fileName); } } catch (Exception e) { e.printStackTrace(); } return null; } 

当我为标题添加multipart / form-data时，我得到**the request was rejected because no multipart boundary was found**例外

如果我没有添加我得到org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

Answer 1

 $scope.continueFileUpload=function (){ var uploadUrl=serverUrl+"continueFileUpload"; var formData=new FormData(); formData.append("file",file.files[0]); $http({ method: 'POST', url: uploadUrl, headers: {'Content-Type': undefined}, data: formData, transformRequest: function(data, headersGetterFunction) { return data; } }) .success(function(data, status) { alert("success"); }) }; 

Answer 2

创建指令将是最有用的方法。 可以使用以下指令。

 var myApp = angular.module('myApp', []); myApp.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]); }); }); } }; }]); 

服务 ：

 myApp.service('fileUpload', ['$q','$http', function ($q,$http) { var deffered = $q.defer(); var responseData; this.uploadFileToUrl = function(file, uploadUrl){ var fd = new FormData(); fd.append('file', file); return $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: { 'Content-Type' : undefined} }) .success(function(response){ /* $scope.errors = response.data.value; */ console.log(response); responseData = response; deffered.resolve(response); return deffered.promise; }) .error(function(error){ deffered.reject(error); return deffered.promise; }); } this.getResponse = function() { return responseData; } }]); 

控制器 ：

 myApp.controller('myCtrl', ['$scope', '$q', 'fileUpload', function($scope, $q, fileUpload){ $scope.dataUpload = true; $scope.errVisibility = false; $scope.uploadFile = function(){ var file = $scope.myFile; console.log('file is ' ); console.dir(file); var uploadUrl = "/continueFileUpload"; fileUpload.uploadFileToUrl(file, uploadUrl).then(function(result){ $scope.errors = fileUpload.getResponse(); console.log($scope.errors); $scope.errVisibility = true; }, function(error) { alert('error'); }) }; }]); 

HTML ：

 
 
  upload me 
 
 × Errors! {{errors.data.value}} 
  

如果您不熟悉angularjs中的指令，请查看以下链接，告诉您如何从头开始使用此链接。 使用AngularJS上传Spring MVC文件

对于文件上传来说真的很好。