Question

我正在研究angularjs和spring应用程序。我正在尝试将附件文件列表发送到spring控制器，但是在spring控制器中，文件未列出并且大小为零。如何将所有附件信息发送到弹簧控制器。我想我遵循了将文件信息传递给spring控制器所需的每个步骤，我是否遗漏了任何东西？

下面是代码：

html：

 <input type="file"  id="f" multiple onchange="angular.element(this).scope().getFileDetails(this);this.value=null;" />
 <button class="btn btn-primary" type="button" ng-click="submitdata()">Send</button>

js：

myApp.controller('sendFilesController', function ($rootScope, $scope, MyService) {
    $scope.files = [];
    $scope.getFileDetails = function(e) {
        console.log("getFileDetails called");
        $scope.$apply(function() {
            for (var i = 0; i < e.files.length; i++) {
                var isFileAvailable = false;
                console.log("File Name  " + e.files[i].name);
                for (var j = 0; j < $scope.files.length; j++) {
                    if ($scope.files[j].name === e.files[i].name) {
                        isFileAvailable = true;
                        break;
                    }
                }
                if (!isFileAvailable) {
                    $scope.files.push(e.files[i]);
                } else {
                    alert("file is already available ::" + e.files[i].name)
                }
            }
        });
    }
    $scope.submitdata = function() {
        console.log("in submit data");
        console.log("$scope.files :: " + $scope.files );
        var data = new FormData();
        for (var i in $scope.files) {
            console.log($scope.files[i]);
            data.append("uploadFile[" + i + "]", $scope.files[i]);
        }
        MyService.sendFiles(data).then(
            function (response) {
             },
            function (errResponse) {

            }
        );
    }
    });

MyService.js

 _myservice.sendFiles = function (data) {
        console.log("in service ---" + data);
        var deferred = $q.defer();
        var repUrl = appURL + '/allFilesData/filesInfo.form';
         var config = {
            transformRequest: angular.identity,
            transformResponse: angular.identity,
            headers : {
                'Content-Type': undefined
            }
        }
        $http.post(repUrl, data, config).then(function (response) {

        }, function (response) {
         });

浏览器控制台上显示的语句：

getFileDetails called
chartController.js?dummy=0.23143028468115556:11629 File Name  huan.txt
chartController.js?dummy=0.23143028468115556:11629 File Name  plunker.txt
chartController.js?dummy=0.23143028468115556:11625 getFileDetails called
chartController.js?dummy=0.23143028468115556:11629 File Name  hi.txt
chartController.js?dummy=0.23143028468115556:11645 in submit data
chartController.js?dummy=0.23143028468115556:11646 $scope.files :: [object File],[object File],[object File]
chartController.js?dummy=0.23143028468115556:11649 File(577) {name: "huan.txt", lastModified: 1514928317302, lastModifiedDate: Tue Jan 02 2018 16:25:17 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 577, …}
chartController.js?dummy=0.23143028468115556:11649 File(52) {name: "plunker.txt", lastModified: 1521206671724, lastModifiedDate: Fri Mar 16 2018 09:24:31 GMT-0400 (Eastern Daylight Time), webkitRelativePath: "", size: 52, …}
chartController.js?dummy=0.23143028468115556:11649 File(2) {name: "hi.txt", lastModified: 1529336556340, lastModifiedDate: Mon Jun 18 2018 11:42:36 GMT-0400 (Eastern Daylight Time), webkitRelativePath: "", size: 2, …}
myService.js?dummy=0.6961916610309059:1840 in  service ---[object FormData]

Spring控制器：

  @RequestMapping(value = "/filesInfo", method = RequestMethod.POST)
    public @ResponseBody String sendFiles(@RequestBody List<MultipartFile> multiPartFileList) throws Exception {

        System.out.println("In SPring controller");
        MultiValueMap<String, Object> map = new LinkedMultiValueMap<>();
        List<Object> files = new ArrayList<>();
        for(MultipartFile file : multiPartFileList) {
            files.add(new ByteArrayResource(file.getBytes()));
        }
        map.put("files", files);
        System.out.println("files " + files);
    //logic
    }

从上面的控制器打印的语句是：

In Spring controller
files []

Answer 1

您的@Controller应将List<MultipartFile> multiPartFileList指定为@RequestParam("file")

@RequestMapping(value = "/filesInfo", method = RequestMethod.POST)
public String sendFiles(@RequestParam("file") List<MultipartFile> multiPartFileList) throws Exception {
    ...

您的客户端submitdata方法应稍作更改，以对每个文件使用相同的FormData键将文件追加到file对象，如下所示：

$scope.submitdata = function() {
  console.log("in submit data");
  console.log("$scope.files :: " + $scope.files );
  var data = new FormData();
  for (var i in $scope.files) {
    console.log($scope.files[i]);
    data.append("file", $scope.files[i]);
  }
  ...

仅供参考，我使用Spring Boot（2）应用程序作为运行Apache Tomcat / 8.5.31的主机进行了测试。

HTH

将多个附件从angularjs传递到spring控制器时，spring控制器中的列表为空

1 个答案: