空列表<MultipartFile>尝试使用 ng-file-upload 在 Spring 中上传许多文件时

Question

I have the following controller method for uploading multiple files at once, inspired by this blog post and answers to this question as well:

@RequestMapping(value = "/{user}/attachment", method = RequestMethod.POST)
@PreAuthorize(...)
public void upload(@PathVariable User user, 
                   @RequestParam("file") List<MultipartFile> files) {
  // handle files
}

However, the list of the files is always empty although request contains them.

If I add the third MultipartRequest parameter to the method:

public void upload(@PathVariable User user, 
                   @RequestParam("file") List<MultipartFile> files,
                   MultipartRequest request)

I can see it contains my uploaded files correctly:

What might be the reason of empty List<MultipartFile> ?

I'm using ng-file-upload to submit the files, but I don't think it is connected with the issue. Spring 4.2.4.

Answer 1

The problem was that ng-file-upload by default submits array of files using names file[0] , file[1] etc. It is configurable with the arrayKey value when using Upload Service. Setting it to empty string forces the files to be sent under the same file key, which is correctly resolved with Spring and the @RequestParam("file") List<MultipartFile> contains all files that has been submitted.

Upload.upload({url: url, data: {file: arrayOfFiles}, arrayKey: ''})

Answer 2

Try to use @ModelAttribute like this:

    @RequestMapping(value = "/{user}/attachment", method = RequestMethod.POST)
    @PreAuthorize(...) 
    public void upload(@PathVariable User user,@ModelAttribute("uploadFile") FileUpload uploadFile) throws IllegalStateException, IOException {

    List<MultipartFile> files = uploadFile.getFiles();
    ...

And create a class like:

     public class FileUpload {
     private List<MultipartFile> files;
     public List<MultipartFile> getFiles() {
        return files;
     }

    public void setFiles(List<MultipartFile> files) {
       this.files= files;
      }
   }

Answer 3

That works for me, sending big 'email' object with multiple file attachments from UI to back-end:

Angular

sendEmailWithAttachments(taskId: string, template: string, email: any, modelConfig: any, files: any[]) {
    let formData = new FormData();
    formData.append('form', new Blob([JSON.stringify(email)], {type: 'application/json'}));
    files.forEach(file  => {
        formData.append('files', file);
    });

    return this.$http({
        method: 'POST',
        data: formData,
        url: this.baseUrl + '/' + taskId + '/email-with-attachment?template=' + template,
        headers: {
            'Content-Type': undefined
        },
        responseType: 'arraybuffer'
    });
}

Java Spring

@RequestMapping(value = "{taskId}/email-with-attachment", method = RequestMethod.POST, consumes = MULTIPART_FORM_DATA_VALUE)
public void sendEmailWithAttachment(
        @PathVariable String taskId,
        @RequestParam String template,
        @RequestParam("form") MultipartFile form,
        @RequestParam("files") List<MultipartFile> files) throws IOException {
    Map<String, String> parameters = new ObjectMapper().readValue(form.getInputStream(), HashMap.class);
    
    System.out.println("taskId"+ taskId);
    System.out.println("template"+ template);
    System.out.println("files"+ files);
    System.out.println("parameters"+ parameters);
}

Answer 4

for multiple files. do this in your javascript

//first add files to form data
var formData = new FormData();
for (let i = 0; i < files.length; i++) {
    formData.append("images", files[i]);
}

//post files to backend e.g using angular
 $http.post('upload', formData, {
     transformRequest: angular.identity,
     headers: {'Content-Type': undefined}
 })
 .then(function(response){
      console.log("UPLOAD COMPLETE::=> ", response);
 }, function (error) {
      console.log(error);
 });

Do this in your java

//your java method signature
@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE )
public Response uploadImage(RequestParam(value = "images") MultipartFile[] images){

}

Answer 5

I think that in the way you sent data from front, it can not bound with java.util.List. If you create a JSON data as request and you annotated your List with @RequestBody like:

@RequestMapping(value = "/{user}/attachment", method = RequestMethod.POST)
@PreAuthorize(...)
public void upload(@PathVariable User user, 
                   @RequestBody List<MultipartFile> files) {
  // handle files
}

this should work. Some info here .