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,問題解決!