Question

我的表单有文本字段和文件类型。我想使用表单bean将其发送到控制器。这是我的代码。以下是我的js文件。从我发送多部分文件的地方。

// create the module and name it scotchApp    
var scotchApp = angular.module('RoutingApp', ['ngRoute']);  
  
// configure our routes    
scotchApp.config(function($routeProvider) {  
    $routeProvider  

         // route for the news page 
        .when('/news/:id', {  
        templateUrl: 'pages/news/:id',  
        controller: 'newsController'  
    })
  
  
});  
  
//comtrollers for HH TAB  

//news
scotchApp.controller('newsController', function($scope, $routeParams) {  
    $scope.model = {
        message: $routeParams
    }
});

我的控制器是..我想首先将多部分文件和文本框值映射到firmbean，然后我想获取我的文件以供进一步处理。

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', ['$http', function ($http) {
    this.uploadFileToUrl = function (file, uploadUrl, uploadform) {
        var fd = new FormData();
        fd.append('file', file);
        fd.append("jsondata", JSON.stringify(uploadform));
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
                .success(function () {
                })
                .error(function () {
                });
    }
}]);

myApp.controller('myFileUpload', ['$scope', 'fileUpload', function ($scope, fileUpload) {

    $scope.uploadFile = function () {
        var file = $scope.myFile;
        $scope.uploadform = {};
        var uploadUrl = "navigation/uploadexcel";
        fileUpload.uploadFileToUrl(file, uploadUrl, $scope.uploadform);
    };

}]);

我的jsp代码如下

 @RequestMapping(value = "/uploadexcel", method = RequestMethod.POST)
public @ResponseBody
String upload(@RequestBody EmployeeFormBean fb) {
    String res = null;
    try {
        MultipartFile f = fb.getFile();
        System.out.println("-->"+ f.getOriginalFilename());

    } catch (Exception e) {
        e.printStackTrace();
    }
    return res;
}

但是我得到的错误如下......

<div style="background-color: blanchedalmond">
    <div ng-controller = "myFileUpload">
        <input type="file" file-model="myFile"/>
        <input type="text" name="template" ng-model="uploadform.templateName"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
</div>

如何解决此问题。我不想通过@resuestparam（“文件”）来做是否可以使用formbean来做到这一点..如果是，请告诉我该怎么做？

Answer 1

您的请求的内容类型存在问题，请尝试将headers = "content-type=multipart/*" , consumes = "application/json"添加到@RequestMapping。除此之外（在您的服务文件上加载），将headers: {'Content-Type': undefined}更改为headers: {'Content-Type': application/json}。希望这会对你有所帮助

是否可以将上传的文件从angularjs发送到spring控制器，但是可以通过formbean发送

1 个答案: