AngularJS загрузить массив FormData файл

Question

Я пытаюсь загрузить (на самом деле POST) множество мелких файлов в один присест вместе с некоторыми ключевыми, пар значений:

   $scope.uploadFiles = function(files) { 

        if (files.length === 0) { 
         return; 
        } 

        var formData = new FormData(); 
        formData.append('keyName1', 'keyValue1'); 
        formData.append('keyName2', 'keyValue2'); 
        formData.append('keyName3', 'keyValue3'); 
        for (var i = 0; i < files.length; i++) { 
         formData.append('files[]', files[i]); 
        } 

        $http.post('/myEndpoint', formData, { 
         headers: { 'Content-Type': undefined }, 
         transformRequest: angular.identity 
        }).success(function (result) { 
         console.log('YAY'); 
        }).error(function() { 
         console.log('NAY'); 
        });     
       } 

Вот Java бэкенд:

@RequestMapping(value = "/myEndpoint", method = RequestMethod.POST) 
@ResponseBody 
public void uploadFiles(
     @RequestParam("files") List<MultipartFile> fileList, 
     @RequestParam("keyName1") String keyName1, 
     @RequestParam("keyName2") String keyName2, 
     @RequestParam("keyName3") String keyName3, 
     HttpServletResponse response, HttpSession session) throws Exception { 

    log.debug(fileList.size()); // Always logs zero 
} 

Конечная точка ударяется, но длина файлаList равна нулю. Я также изменил

List<MultipartFile> fileList to MultipartFile[] filesArray 

но это не сработало.

Может ли кто-нибудь пролить свет, пожалуйста?

Приветствия,

Пол

Answer 1

Я использовал библиотеку на GitHub, чтобы помочь мне выполнить эту задачу с моей Java Glassfish Server.

https://github.com/nervgh/angular-file-upload

Я только нужно загрузить один файл, а вот Java Backend получить этот файл. У этой структуры есть поддержка для загрузки нескольких файлов на сервер.

@POST 
@Path("/Endpoint") 
@Consumes(MediaType.MULTIPART_FORM_DATA) 
public Response whateverEndPoint(@FormDataParam("fileName") InputStream fileInputStream, 
     @FormDataParam("fileName") FormDataContentDisposition contentDispositionHeader, 
     @FormDataParam("additionalParameter") String additionalParameter) { 

    System.out.println(contentDispositionHeader.getFileName()); 

    String output = "File Received on the server: "; 

    return Response.status(200).entity(output).build(); 

} 

Вот мой угловой контроллер, который использует структуру:

angular.module('AppThing').controller('DemoController',function($rootScope,$scope,FileUploader){ 

//creating the uploader with the correct url 
$scope.uploader = new FileUploader({ 
    url : 'Endpoint', 
    method : 'POST', 
    alias: 'fileName', 
    autoUpload:true 
}); 

//runs right after we add a file to the queue 
$scope.uploader.onAfterAddingFile = function(item){ 
}; 

//runs right before we upload an item to the server 
$scope.uploader.onBeforeUploadItem = function(item){ 
     console.log('This is just before the image upload'); 
     item.formData.push({'additionalParameter': $rootScope.additionalParameter}); 
}; 

$scope.uploader.onSuccessItem = function(item, response, status, headers) { 

}; 



}); 

Надеется, что это помогает

Answer 2

Это может быть полезно для вас.

Угловой:

$scope.uploadFiles = function(files) { 
    if (files.length === 0) { 
     return; 
    } 

    var formData = new FormData(); 
    formData.append('keyName1', 'keyValue1'); 
    formData.append('keyName2', 'keyValue2'); 
    formData.append('keyName3', 'keyValue3'); 
    for (var i = 0; i < files.length; i++) { 
     formData.append('file'+i, files[i]); 
    } 

    $http.post('/myEndpoint', formData, { 
     headers: { 'Content-Type': undefined }, 
     transformRequest: angular.identity 
    }).success(function (result) { 
     console.log('YAY'); 
    }).error(function() { 
     console.log('NAY'); 
    });     
} 

На Spring/Java Сторона:

RequestMapping(value = "/myEndpoint", method = RequestMethod.POST) 
public @ResponseBody Object uploadFiles(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException { 
    //do stuff here... 
    final String keyName1= request.getParameter('keyName1'); 
    //and so on...... 

    Iterator<String> iterator = request.getFileNames(); 
    MultipartFile multipartFile = null; 
    while (iterator.hasNext()) { 
     multipartFile = request.getFile(iterator.next()); 
     //do something with the file..... 
    } 
} 

Кстати, на вас угловой стороне, вы можете всегда конец файла на одном дыхании или с множественным запросом. Это зависит от вас, как вы хотите, чтобы это реализовано.