Как отправить несколько файлов вместе с данными формы в angularjs

0

Я использую 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

Форма HTML JsFiddle

Образец

Угловой фрагмент кода Js для данных формы вставки

$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() со стороны сервера, я должен иметь доступ к файлам, прикрепленным к каждому запросу.

  • 0
    можно опубликовать ответ для бэкэнда node.js? Я использовал модуль ng-file-upload для загрузки нескольких изображений вместе с другими данными формы за один раз.
  • 0
    @ Гэндальф Белый, пожалуйста, опубликуйте это, может быть, я смогу получить представление о вашем коде. Спасибо
Показать ещё 4 комментария
Теги:
ng-file-upload

1 ответ

4

Multiple File Upload using AngularJS: сервер, запрашивающий с текстовыми и многостраничными файлами JSON.

Скрипт на стороне клиента и его скрипка.

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 Controller для 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 );

    }
}

Мы можем установить ограничение размера файла в ссылке springFile

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

</beans:bean>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню