使用ajax和spring mvc上传多个文件

Gau*_*mar 8 java ajax jquery spring spring-mvc

我正在尝试使用FormData和spring上传多个文件.

HTML:

<input type="file" name="img" multiple id="upload-files">
Run Code Online (Sandbox Code Playgroud)

JS代码:

var ajaxData = new FormData();
var files = $('#upload-files').prop('files');
for(var i=0;i<files.length;i++){
    ajaxData.append('file['+i+']', files[i]);
}
ajaxData.append("file", files);
$http.post('../rest/upload', ajaxData, {
    headers: {'Content-Type': undefined },
    transformRequest: angular.identity
});
Run Code Online (Sandbox Code Playgroud)

Spring控制器代码:

@RequestMapping(value = "/upload", produces="application/json", method = RequestMethod.POST)
@ResponseBody
public String upload(
        @RequestParam ArrayList<MultipartFile> files
){
    System.out.println(files.size());
    return null;
}
Run Code Online (Sandbox Code Playgroud)

但是,在提交具有多个文件的请求时,文件数量将为0.在使用数组表示法MultipartFile[] files而不是ArrayList时,它给出400,错误请求.

如何使弹簧控制器与多个文件一起工作?我无法找到其他SO问题的解决方案.

Vik*_*tev 5

默认情况下,DataBinder尝试使用约定将请求参数绑定到目标对象 - 来自请求的参数名称(在您的情况下为 FormData)和控制器操作中的参数名称必须匹配。

在您的情况下,您应该重命名file[i]files[i]

for(var i=0; i < files.length; i++){
    ajaxData.append('files[' + i + ']', files[i]);
}
Run Code Online (Sandbox Code Playgroud)

将动作的参数重命名ArrayList<MultipartFile> filesArrayList<MultipartFile> file


另外,删除这一行ajaxData.append("file", files);(就在 for 循环之后),因为它正在设置一个同名的参数,并且可能会出现某种故障。

希望这可以帮助。