上传文件出错:当前请求不是spring 4和angular js中的分块请求

Question

我使用了Spring4和angularjs，对于多部分文件，我使用了commons-fileupload-1.3.2.jar和commons-io-2.4.jar我得到了错误"org.springframework.web.multipart.MultipartException:当前请求不是一个多部分请求“当上传文件时

application-servlet.xml包含以下条目：

<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="20971520" /> 
</bean>

html文件：`

<div class="padding-5 border-1">
    <input type="file" id="uploadFileName" 
           size="60" class="filestyle width100per"
           data-icon="false" file-model="importIdeaFile"
           name="filename" required>
</div>`

角度控制器：

$scope.saveFile = function(){
     var filename = $scope.importIdeaFile.name;
             var formdata = new FormData();
       if(typeof $scope.importIdeaFile != 'undefined' && $scope.importIdeaFile != null && $scope.importIdeaFile !=''){
              formdata.append("file",$scope.importIdeaFile);
                     formdata.append('data',new Blob([JSON.stringify($scope.uploadPopupData)], {
                type: "application/json"
            }));$http.post('loginData/uploadIdeafile',formdata,{headers: {'Content-Type': undefined}})
                    .then(
                            function(response,status) {
                                alert(status);  
                            },
                            function(errResponse) {
                                alert(" Error while fetching User");
                            });        
       }
 }`

弹簧控制器：

@RequestMapping(value = "/uploadIdeafile", method = RequestMethod.POST, produces = "application/json")
public String uploadIdeafile(@RequestPart("file") MultipartFile formdata,
              HttpServletRequest request) {
       String methodName = "uploadIdeafile(@RequestBody MultipartFile formdata, HttpServletRequest request)";
       String message = "true";
       return message;}

已创建目录：

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

Answer 1

我在http调用中添加了“transformRequest: angular.identity”，解决了问题。

$scope.saveFile = function(){
 var filename = $scope.importIdeaFile.name;
         var formdata = new FormData();
   if(typeof $scope.importIdeaFile != 'undefined' && $scope.importIdeaFile != null && $scope.importIdeaFile !=''){
          formdata.append("file",$scope.importIdeaFile);
                 formdata.append('data',new Blob([JSON.stringify($scope.uploadPopupData)], {
            type: "application/json"
        }));$http.post('loginData/uploadIdeafile',formdata,{headers: {'Content-Type': undefined}})
                .then(
                        function(response,status) {
                            alert(status);  
                        },
                        function(errResponse) {
                            alert(" Error while fetching User");
                        });        
   }

}`

新代码：

$scope.saveFile = function(){
 var filename = $scope.importIdeaFile.name;
         var formdata = new FormData();
   if(typeof $scope.importIdeaFile != 'undefined' && $scope.importIdeaFile != null && $scope.importIdeaFile !=''){
          formdata.append("file",$scope.importIdeaFile);
                 formdata.append('data',new Blob([JSON.stringify($scope.uploadPopupData)], {
            type: "application/json"
        }));$http.post('loginData/uploadIdeafile',formdata,{
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}})
                .then(
                        function(response,status) {
                            alert(status);  
                        },
                        function(errResponse) {
                            alert(" Error while fetching User");
                        });        
   }

}`