一、環境搭建
1）新建SpringBoot項目，勾選 web 和 thymeleaf 依賴。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
二、接口編寫
@Controller public class FileController { @ResponseBody @PostMapping("upload") public String upload(MultipartFile file, HttpServletRequest request, HttpServletResponse response) { if (file.isEmpty()) return "文件為空！"; // 獲取當前時間 String current_date = new SimpleDateFormat("/yyyy/MM/dd/").format(new Date()); // 保存文件的目錄 String folder = request.getServletContext().getRealPath("/img") + current_date; // 判斷是否需要創建目錄 File folderFile = new File(folder); if (!folderFile.exists()) folderFile.mkdirs(); String filename = file.getOriginalFilename(); // 文件名 filename = UUID.randomUUID().toString().replace("-", "") + filename.substring(filename.lastIndexOf(".")); try { File destFile = new File(folderFile, filename); System.out.println(destFile.getAbsolutePath()); file.transferTo(destFile); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + current_date + filename; System.out.println(String.format("上傳成功，圖片路徑：%s", url)); return "success"; } catch (IOException e) { return "上傳失敗！"; } } }
三、前端上傳頁面 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上傳</title> </head> <body> <div align="center"> <input type="file" id="pic" name="pic"/> <input type="button" value="上傳圖片" onclick="uploadFile()" /> </div> <div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden"> <table width="300" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="center" id="progressPersent">0%</td> </tr> <tr> <td> <!-- 黑色邊框部分 --> <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td> <!-- 紅色部分 --> <table width="1%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0000" id="progress"> <tr> <td> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="center" id="complete">completed</td> </tr> </table> </div> <script> var xhr = new XMLHttpRequest(); // 上傳失敗處理 function uploadFailed(evt) { console.log(evt); document.getElementById("progressBar").style.visibility = "hidden"; document.getElementById("complete").innerText = evt.value(); } // 偵察附件上傳情況，這個方法大概0.05-0.1秒執行一次 function onprogress(evt) { document.getElementById("progressBar").style.visibility = "visible"; var loaded = evt.loaded; // 已經上傳大小情況 var total = evt.total; // 附件總大小 var per = Math.floor(100 * loaded / total); // 已經上傳的百分比 document.getElementById("progressPersent").innerText = per + "%"; document.getElementById("progress").style.width = per + "%"; } // 上傳文件 function uploadFile() { // 1. 將上傳的文件放入FormData中 var fileList = document.getElementById("pic").files; var formData = new FormData(); formData.append("file", fileList[0]); // 監聽事件 xhr.upload.addEventListener("progress", onprogress, false); xhr.addEventListener("error", uploadFailed, false); // 請求方式 接口 true：異步請求 xhr.open("POST", "upload", true); xhr.send(formData); // 帶上數據 xhr.onreadystatechange = function (ev) { if (xhr.readyState == 4 && xhr.status == 200) { if (xhr.responseText == "success") { document.getElementById("progress").style.width = "100%"; document.getElementById("progressPersent").innerText ="100%" ; document.getElementById("complete").innerText ="上傳成功！" ; }else { document.getElementById("complete").innerText ="上傳失敗！" ; } } } } </script> </body> </html>
四、測試上傳
1）SpringBoot 默認配置的 最大文件上傳大小 和 最大請求大小 都是10MB，為了能夠清楚看到進度條效果配置成120MB。
spring: servlet: multipart: max-file-size: 120MB max-request-size: 120MB thymeleaf: cache: false
2）運行程序，我選擇了一個60MB左右的文件上傳。
轉載自：https://jingyan.baidu.com/article/ceb9fb1064774b8cad2ba096.html