注意: formData爲H5中提出的，所以老版本的瀏覽器可能不支持(例如:IE等)
鑑於網上一大堆異步上傳文件沒有講清楚，特意作如下筆記，以防忘記:
前端代碼部分:
<html>
<head>
<title>文件上傳案例</title>
<script src="${pageContext.request.contextPath}/js/axios.min.js"></script>
</head>
<body>
<!--
上傳文件需要將enctype改爲multipart/form-data
文件操作必須爲POST請求
-->
<h3>異步Ajax方式(axios)</h3>
<div>
<input type="file" id="filepath"/>
<input type="button" id="fileuploadBtn" value="文件上傳"/>
</div>
<script>
document.getElementById("fileuploadBtn").addEventListener('click', function (event) {
// 通過file表單的files數組屬性，獲取文件二進制流
let filepath = document.getElementById("filepath").files[0];
// 注意: formData爲H5中提出的，所以老版本的瀏覽器可能不支持(例如:IE等)
// formData從官網上得知，是以Key/Value方式設置值得
// 結果網上一大堆搓逼，沒一個把formData講清楚的
// 這裏append中'filepath'即爲file表單元素的name, 與服務端的參數key匹配才能接收數據
let formData = new FormData()
formData.append('filepath',filepath)
axios({
url:".../fileuploadAjax", // 採用了超級原始的EL表達式
method: "post",
data: formData,
/*headers: { // 經過測試，其實不需要設置該請求頭，服務端一樣能接收二進制數據流
'Content-Type': 'multipart/form-data'
}*/
}).then((res)=>{
console.log(res)
});
});
</script>
</body>
</html>
後端SpringMVC部分:
/**
* 文件上傳操作, 文件操作必須爲POST請求(異步操作)
* @param filepath SpringMVC封裝的上傳組件對象: 該參數與前端的formData對象中append裏設置的key對應，才能被匹配接收
* (可以觀察請求體來測試)
* 我這裏測試如果沒有加MultipartConverters組件, 並不會報錯，但是無法獲得MultipartFile(即爲null)
* 如採用了commons-fileupload，則需要引入commons-fileupload和commons-io倆個jar依賴包
*/
@RequestMapping(value = "/fileuploadAjax", method = RequestMethod.POST)
@ResponseBody
public String fileupload2(MultipartFile filepath, HttpSession session) throws IOException {
// 獲得上傳的文件名
String originalFilename = filepath.getOriginalFilename();
System.out.println("上傳的文件名爲: " + originalFilename);
// 獲得file表單的name值
String name = filepath.getName();
System.out.println("File表單的name值: " + name);
// 使用UUID設置隨機不重複的名字，以便用於保存文件
String fileName = UUID.randomUUID() + originalFilename.substring(originalFilename.lastIndexOf("."));
// 保存路徑爲項目目錄下的photo文件夾
String photo = session.getServletContext().getRealPath("photo");
File file = new File(photo);
// 判斷存放路徑是否存在，如果不存在，則創建
if(!file.exists()){
file.mkdirs();
}
// 拼裝保存文件路徑(包括文件名)
StringBuffer sbf = new StringBuffer();
String saveFilePath = sbf.append(photo).append(File.separator).append(fileName).toString();
/**
* 方式1. 可以通過IO流將文件寫入到服務器磁盤中
*/
/*InputStream is = fileUpload.getInputStream();
OutputStream os = new BufferedOutputStream(new FileOutputStream(saveFilePath));
byte[] bytes = new byte[1024];
int len = -1;
while((len = is.read(bytes)) != -1){
os.write(bytes, 0, len);
}
os.close();
is.close();*/
/**
* 方式2. 直接使用MultipartFile的transferTo方法
*/
filepath.transferTo(new File(saveFilePath));
return "上傳成功";
}