ajax使用formData提交文件数组(springMVC接收)

1. 问题:使用formData提交文件数组

在文件上传的部分,由于涉及了不定项input框来上传文件.所以后台接收的部分是没法处理的
感觉可以使用一个数组或者list,使用MultipartFile类型来进行接收
初始思路:
var formData = new FormData()
// 存储文件名称的数组
var fileNameList = getAllList();
// 遍历数组,一次获取file列表
var tempFiles = [];
$.each(fileNameList, function (i, item) {
var tempId = i + 1;
// 遍历获取文件
var tempFile = $(’#classMediaPic’ + tempId)[0].files[0];
tempFiles.push(tempFile );
})
formData.append(“appId”,appId);
formData.append(“fileList”,tempFiles);

ajax上传

注意dataType,async,contentType,processData一定写对,不然jquery会处理formData的数据

$.ajax({
url: basePath + ‘/url’,
type: “POST”,
dataType: ‘json’,
data: formData,
async: false, // 加上同步,不然后端得不到文件
contentType: false,
processData: false,
success: function (res) {
if (res.code != 0){
alert(res.msg, “error”)
} else {
alert(“已申请”, “success”, function () {
// 刷新页面
location.reload();
});
}
}
});

后端接收
@RequestMapping("/url")
public R addCategory1(@RequestParam(“appId”) String appId,
@RequestParam(“fileList”) MultipartFile[] fileList){}

最终结果:
400
查看表单,fileList也确实是fileList[Object file, Object file]
但是后端就是接收不到

2. 解决

最终经过尝试发现,文件数组不能直接append
正确的formData 存放多个文件的方式:
var formData = new FormData()
// 存储文件名称的数组
var fileNameList = getAllList();
$.each(fileNameList, function (i, item) {
var tempId = i + 1;
// 遍历获取文件
var tempFile = $(’#classMediaPic’ + tempId)[0].files[0];
formData.append(“fileList”,tempFile);
})
formData.append(“appId”,appId);

即不借助数组,直接将每一个文件放进去,append的时候的key都为fileList,最终在后端使用@requestParam(“fileList”) MultipartFile[] fileList 接收

后端同上,再次测试,发现文件数组成功的传到了后端

ok,问题解决!