Java 将文件从angularjs控制器发送到spring控制器，显示错误请求404_Java_Angularjs_Spring_Spring Mvc

Java 将文件从angularjs控制器发送到spring控制器，显示错误请求404

java angularjs spring spring-mvc

Java 将文件从angularjs控制器发送到spring控制器，显示错误请求404,java,angularjs,spring,spring-mvc,Java,Angularjs,Spring,Spring Mvc,我试图从Angularjscontroller获取文件到Spring Controller，以便从Angularjscontroller上传excel文件并从Spring Controller读取这是AngularController代码 'use strict'; webapp.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(

我试图从Angularjscontroller获取文件到Spring Controller，以便从Angularjscontroller上传excel文件并从Spring Controller读取

这是AngularController代码

 'use strict';
  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]);
                });
        });
    }
};
}]);
       webapp.service('fileUpload', ['$http', function ($http) {
     this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(fd){
        alert(sucess+fd)
    })
    .error(function(fd){
        alert(error+fd)
    });
}
    }]);
    webapp.controller('bussinesscontroller', ['$scope', 'fileUpload',    function($scope, fileUpload){
    $scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log('file is ' );
    console.dir(file);
    var uploadUrl = '/uploadsfiles';
    fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);

   @RequestMapping(value="/uploadsfiles",method=RequestMethod.POST)
  @ResponseBody
   public JSONObject getFile(@RequestParam("file") String file ){
    JSONObject jsonObject=new JSONObject();

    /*System.out.println("data= "+data);*/
    System.out.println("hiii...");

    return jsonObject;
    }

<body>
<div ng-controller="bussinesscontroller">
<fieldset>
 <!-- <form name="fileupload"   novalidate> -->
<legend>Excel File upload</legend>
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload</button>      
 </fieldset>
 <!-- </form> -->
 </div>
  </body>
  </html>

这是弹簧控制器代码

 'use strict';
  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]);
                });
        });
    }
};
}]);
       webapp.service('fileUpload', ['$http', function ($http) {
     this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(fd){
        alert(sucess+fd)
    })
    .error(function(fd){
        alert(error+fd)
    });
}
    }]);
    webapp.controller('bussinesscontroller', ['$scope', 'fileUpload',    function($scope, fileUpload){
    $scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log('file is ' );
    console.dir(file);
    var uploadUrl = '/uploadsfiles';
    fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);

   @RequestMapping(value="/uploadsfiles",method=RequestMethod.POST)
  @ResponseBody
   public JSONObject getFile(@RequestParam("file") String file ){
    JSONObject jsonObject=new JSONObject();

    /*System.out.println("data= "+data);*/
    System.out.println("hiii...");

    return jsonObject;
    }

<body>
<div ng-controller="bussinesscontroller">
<fieldset>
 <!-- <form name="fileupload"   novalidate> -->
<legend>Excel File upload</legend>
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload</button>      
 </fieldset>
 <!-- </form> -->
 </div>
  </body>
  </html>

这是html代码

 'use strict';
  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]);
                });
        });
    }
};
}]);
       webapp.service('fileUpload', ['$http', function ($http) {
     this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(fd){
        alert(sucess+fd)
    })
    .error(function(fd){
        alert(error+fd)
    });
}
    }]);
    webapp.controller('bussinesscontroller', ['$scope', 'fileUpload',    function($scope, fileUpload){
    $scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log('file is ' );
    console.dir(file);
    var uploadUrl = '/uploadsfiles';
    fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);

   @RequestMapping(value="/uploadsfiles",method=RequestMethod.POST)
  @ResponseBody
   public JSONObject getFile(@RequestParam("file") String file ){
    JSONObject jsonObject=new JSONObject();

    /*System.out.println("data= "+data);*/
    System.out.println("hiii...");

    return jsonObject;
    }

<body>
<div ng-controller="bussinesscontroller">
<fieldset>
 <!-- <form name="fileupload"   novalidate> -->
<legend>Excel File upload</legend>
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload</button>      
 </fieldset>
 <!-- </form> -->
 </div>
  </body>
  </html>


Excel文件上传
上传

Hi@rohit look我对Angular不太熟悉，但我对Spring的了解足以告诉您，您的问题在于它的配置。首先，您必须在web.xml中声明一个过滤器，让Spring MVC知道您正在尝试使用其FileUpload功能：

<filter>
    <filter-name>springMultipartFilter</filter-name>
    <filter-class>org.springframework.web.multipart.support.MultipartFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>springMultipartFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

现在，将控制器配置为在GET方法中创建此表单对象，该方法以角度显示HTML表单，另一个POST方法在触发submit按钮时接收此对象：

@Controller
public class MyAngularController {

    @RequestMapping(value = "/displayUploadsfiles", method = RequestMethod.GET)
    public String display(ModelMap context) {

        context.addAttribute("myFile", new MyAngularSpreadSheetForm());

        return "myAngularPage";
    }

    @ResponseBody
    @RequestMapping(value="/uploadsfiles",method=RequestMethod.POST)
    public JSONObject getFile(@ModelAttribute MyAngularSpreadSheetForm myFile){

        MultipartFile multipartFile = myFile.getSpreadSheetFile();

        if (multipartFile != null) {
            String originalFilename = multipartFile.getOriginalFilename();
            Long fileSize = multipartFile.getSize();

            File tempFile = null;

            try {
                InputStream inputStream = multipartFile.getInputStream();
                // here goes your file manipulation instructions if you want to use Apache POI or Jxl or another API that manipulates spread sheets
            } catch (Exception exception) {
                // here goes the way how you control your error and display it in the view
            }
        }

        JSONObject jsonObject=new JSONObject();

        /*System.out.println("data= "+data);*/
        System.out.println("hiii...");

        return jsonObject;
    }

}