今天在處理檔案上傳的時候遇到一個問題,就是想使用者選擇多個檔案一次上傳,并且用jquery post方式送出,
最開始以為直接給Formdata append一個file的資料就行了,但是到了背景資料就沒有了,後面經過實驗發現
可以向formdata的key值裡面多次append file 就可以,附上代碼。
html元素:
<input type="file" name="uploadImgs" id="file" multiple="multiple"/>
JavaScript:
function fileUpload(){
var data = new FormData();
var files= $("#file")[].files;
/**這裡多次append file到同一個key裡面*/
for(var i=;i<files.length;i++){
data.append("picture", files[i]);
}
$.ajax({
data: data,
url: '/uploadImg',
type: "POST",
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
}
})
}
背景代碼,背景使用Springboot寫的,貼出部分controller的代碼:
@PostMapping("/uploadImg")
public ResponsePO pictureUpload(@RequestParam("picture") List<MultipartFile> files) {
ResponsePO resultPO = new ResponsePO();
List<String> urls = new ArrayList<>();
try {
for (MultipartFile file : files) {
String fileName = storageService.store(file);
urls.add("/uploadimg/" + fileName);
}
resultPO.setR();
resultPO.setD(urls);
return resultPO;
} catch (Exception e) {
resultPO.setR();
resultPO.setErrAndMsg(EXCEPTION_FOND);
return resultPO;
}
}