如何在angularjs中发送多个文件以及表单数据答案

【问题标题】：How to send Multiple FIles along with the form data in angularjs如何在angularjs中发送多个文件以及表单数据
【发布时间】：2016-01-25 11:28:54
【问题描述】：

我正在使用ng-file-upload 选择多个文件。但我的要求是我想将这些选定的文件作为文件列表附加到我的 Js 对象中，并通过 REST 将此对象发送到服务器。到目前为止，我的数据插入部分是在没有文件列表的情况下工作正常。

REST 服务代码片段

@POST
@Path("/manual")
@Produces(MediaType.APPLICATION_JSON)
public boolean insertResults(testVO testResult) {

    for(Object o:testVO.getFiles()){

       //File access code goes here    
    }
}

testVO.Java 类

private String fName;
private String lName;
private Object[] files;
... getter and setter methods goes here

JsFiddle HTML 表单

Sample

用于插入表单数据的 Angular Js 代码 sn-p

$scope.insertResults= function(tc){
var result = {};
result.lName= tc.lName;
result.fName= tc.fName;
result.files=$scope.files; //This also works but i can not access file content
Service.ManualResult.insertResults({},result)
.$promise.then(function(data){
//succes code goes here
},function(error) {
//error 
}
};

我的要求是我如何发送文件列表以及表单数据并在服务器端访问每个上传的文件详细信息。

注意：当我从服务器端调用 testVO.getFiles() 时，我应该能够访问附加到每个请求的文件。

【问题讨论】：

我可以发布 node.js 后端的答案吗？我已经使用 ng-file-upload 模块一次性上传多个图像以及其他表单数据。
@Gandalf the White 请把它贴出来，也许我可以看看你的代码。谢谢
你试过Upload.upload({url:'...', data: {lName: tc.lName, ..., files: $scope.files}})吗？
只用github上的docs，发类似jsfiddle sample的文件，doc里面有Spring MVC samples，使用那里的代码。您不需要在客户端将其转换为字符串，只需使用示例中的语法读取多部分请求文件内容，它是一个字节数组。
github.com/danialfarid/ng-file-upload/blob/master/demo/src/main/… 看看这个。您的问题不在前端部分，因此我的代码对您没有用处。

标签： javascript java angularjs ng-file-upload

【解决方案1】：

Multiple File Upload using AngularJS：服务器请求 JSON 文本和多部分文件数据。

客户端脚本及其fiddle。

window.onload = function() {
 var app = angular.module("myapp", []);
    app.controller("uploadcontroller", function uploadcontrollerFun($scope, $http) {
      
      $scope.files = [];
      $scope.getFileDetails = function(e) {
        $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() {
        var data = new FormData();
        for (var i in $scope.files) {
          data.append("uploadFile[" + i + "]", $scope.files[i]);
        }
        data.append("key1", 'email');
        console.log("data",data);
        var targetRequestPath =  //'./UploadScenarioFiles'; // Controller URL
           'http://localhost:8080/PerformanceUI/UploadScenarioFiles';
        
        $http({
          method: 'POST',
          url: targetRequestPath,
          headers: {
            'Content-Type': undefined
          },
          data: data
        }).then(function(response) {
          console.log('Response Data : ', response.data);
          callback(response.data);
        })
      }
    });
}

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
 </head>
 <body>
  <div class="form-group ng-scope" ng-app="myapp" ng-controller="uploadcontroller">
    <label class="control-label col-sm-3"> Import File 
      <span class="error">*</span>
    </label>
    <div class="col-lg-6 col-sm-6 col-12">
      <label class="btn btn-primary">
        <input type="file" id="f" accept=".txt,.csv,.jmx " multiple="" onchange="angular.element(this).scope().getFileDetails(this);this.value=null;">
      </label>
      <br><br>
      <button class="btn btn-success" ng-click="submitdata()">  submit </button>
    </div>
  </div>
 </body>
</html>

Spring 控制器到consume multipart and json text.

@RequestMapping(value = "/UploadScenarioFiles", method = RequestMethod.POST)
public void UploadscenarioFiles(HttpServletRequest request, HttpServletResponse response) {
    String param1;
    if (request != null) { // JSON Text
        param1 = request.getParameter("key1");
    }
    MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
    Iterator<String> fileNames = multipart.getFileNames();
    while (fileNames.hasNext()) { // Get List of files from Multipart Request.

        MultipartFile fileContent = multipart.getFile(fileNames.next());

        // Save files to Local (or) any Storage server.
        File file = new File("E:\\AA\\test\\"+fileContent.getOriginalFilename());
        fileContent.transferTo( file );

    }
}

我们可以在spring配置文件中设置文件大小限制link

     <!-- setting maximum upload size -->
    <beans:property name="maxUploadSize" value="100000" />

</beans:bean>

【讨论】：