angularjs和spring mvc - 在一个请求中上传多个文件

Question

我想在我的Web应用程序中实现文件上载,我angular.js在客户端和spring mvc服务器端使用.

我设法使用https://github.com/danialfarid/angular-file-upload获得单个文件上传和多个文件上传工作.问题是,当我上传多个文件时,每个文件都作为单独的请求来到我这里(在阅读示例代码后这是明显的事件):

//inject angular file upload directives and service.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        // method: POST or PUT,
        // headers: {'headerKey': 'headerValue'}, withCredential: true,
        data: {myObj: $scope.myModelObj},
        file: $file,
        //(optional) set 'Content-Desposition' formData name for file
        //fileFormDataName: myFile,
        progress: function(evt) {
          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      })
      //.error(...).then(...); 
    }
  }
}];

所有文件都有一个迭代.

现在我想知道是否有可能以某种方式将多个文件作为单个请求上传.

Answer 1

在弹簧控制器端创建

@RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String save(@ModelAttribute("filesForm") FileUploadForm filesForm) {
                List<MultipartFile> files = filesForm.getFiles();
              //do something

        }


public class FileUploadForm 
    {
    private List<MultipartFile> files;

     // geters and  setters ...

    }

在客户端上传服务

return {
            send: function(files) {
                var data = new FormData(),
             xhr = new XMLHttpRequest();
                xhr.onloadstart = function() {
                    console.log('Factory: upload started: ', file.name);
                    $rootScope.$emit('upload:loadstart', xhr);
                };

                xhr.onerror = function(e) {
                    $rootScope.$emit('upload:error', e);
                };
                xhr.onreadystatechange = function(e)
                {
                    if (xhr.readyState === 4 && xhr.status === 201)
                    {
                        $rootScope.$emit('upload:succes',e, xhr, file.name ,file.type);

                    }
                };

         angular.forEach(files, function(f) {
         data.append('files', f, f.name);
            });

                xhr.open('POST', '../upload');
                xhr.send(data);


            }
        };