1.編寫文件上傳的表單頁面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>動態添加文件上傳列表</title><link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet"><script th:src="@{/login/js/jquery.min.js}"></script>
</head>
<body><div th:if="${uploadStatus}" style="color: red" th:text="${uploadStatus}">上傳成功</div><form th:action="@{/uploadFile}" method="post" enctype="multipart/form-data">上傳文件:??<input type="button" value="添加文件" onclick="add()"/><div id="file" style="margin-top: 10px;" th:value="文件上傳區域"></div><input id="submit" type="submit" value="上傳"style="display: none;margin-top: 10px;"/></form><script type="text/javascript">// 動態添加上傳按鈕function add(){var innerdiv = "<div>";innerdiv += "<input type='file' name='fileUpload' required='required'>" +
"<input type='button' value='刪除' onclick='remove(this)'>";innerdiv +="</div>";$("#file").append(innerdiv);// 打開上傳按鈕$("#submit").css("display","block");}// 刪除當前行<div>function remove(obj) {$(obj).parent().remove();if($("#file div").length ==0){$("#submit").css("display","none");}}</script>
</body>
</html>2.引入jQuery
3.在全局配置文件中添加文件上傳的相關配置
# 單個上傳文件大小限制（默認1MB）
spring.servlet.multipart.max-file-size=10MB
# 總上傳文件大小限制（默認10MB）
spring.servlet.multipart.max-request-size=50MB4.進行文件上傳處理實現文件上傳功能
//toUpload()方法處理路徑為“/toUpload”的GET請求，向文件上傳頁面//upload.html跳轉；
@GetMapping("/toUpload")
public String toUpload(){return "upload";}/*uploadFile()方法處理路徑為“/uploadFile”的POST請求，對上傳文件進行處理。文件上傳處理過程中，對文件名進行重命名并存放在“F:/file/”目錄下，并封裝了返回結果。其中，處理上傳文件的請求方法中，使用了“MultipartFile[] fileUpload”參數處理單個或多個上傳文件（也可以使用單列集合參數），fileUpload參數名必須與upload.html頁面中上傳文件<input>框中的name屬性值一致。*/
@PostMapping("/uploadFile")public String uploadFile(MultipartFile[] fileUpload, Model model) {// 默認文件上傳成功，并返回狀態信息model.addAttribute("uploadStatus", "上傳成功！");for (MultipartFile file : fileUpload) {// 獲取文件名以及后綴名String fileName = file.getOriginalFilename();// 重新生成文件名（根據具體情況生成對應文件名）fileName = UUID.randomUUID()+"_"+fileName;// 指定上傳文件本地存儲目錄，不存在需要提前創建String dirPath = "F:/file/";File filePath = new File(dirPath);if(!filePath.exists()){filePath.mkdirs();}try {file.transferTo(new File(dirPath+fileName));} catch (Exception e) {e.printStackTrace();// 上傳失敗，返回失敗信息model.addAttribute("uploadStatus","上傳失敗： "+e.getMessage());}}// 攜帶上傳狀態信息回調到文件上傳頁面return "upload";}5.效果測試
-
在瀏覽器上訪問http://localhost:8080/toUpload，效果如下：
如果不能正常解析模板頁面，那么
a.添加NekoHTML依賴（一個簡單地HTML掃描器和標簽補償器）
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
b.在全局配置文件上添加如下配置
#thymeleaf對html的標簽約束非常嚴格，所有的標簽必須有開有閉，比如#<br></br>或者<br/>是可以的，但是<br>會報錯，配置#spring.thymeleaf.mode=LEGACYHTML5 目的就是為了解決這個問題，可以使頁面#松校驗。
spring.thymeleaf.mode=LEGACYHTML5
- 點擊【添加文件】，添加幾個文件
- 驗證文件上傳處理效果，查看定制的上傳文件存儲目錄“F:/file/”
)
![Vue3 + TypeScript，關于item[key]的報錯處理方法](http://pic.xiahunao.cn/Vue3 + TypeScript，關于item[key]的報錯處理方法)
)