Spring Boot整合web層實現過程詳解
阿新 • • 發佈：2020-04-10
Spring Boot中對Spring MVC的檔案上傳是一脈相傳的，我們雙擊shift去搜CommonsMultipartResolver這個類，它是檔案上傳的一個實現類。我們先看一下原始碼：
我們可以看到它是MultipartResolver的實現類，我們再Ctrl+H,就可以看到右側MultipartResolver的兩個實現類。第一個實現類在servlet3.0之後，什麼都不用加，就可以直接使用。第二個實現類的相容性要好一些，早期的servlet也可以使用，但需要自己額外的加依賴。那麼在Spring Boot中，我們就可以直接使用第一個實現類去完成檔案上傳。
只需要一個controller和一個靜態html檔案，就可以，先看一下程式碼
package com.zl.upload;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import java.util.logging.SimpleFormatter;
@RestController
public class UploadController {
SimpleDateFormat ss=new SimpleDateFormat("yyyy/MM/dd/");
@PostMapping("/upload")
//HttpServletRequest request獲取快取地址，一般這裡使用圖片伺服器
public String upload(MultipartFile multipartFile,HttpServletRequest request){
//圖片儲存在專案的執行路徑下
String format = ss.format(new Date());
String realpath = request.getServletContext().getRealPath("img") + format;
//建立儲存的資料夾
File f = new File(realpath);
if(!f.exists()){
f.mkdirs();
}
//因為檔名可能會重複，所以要對檔名進行修改
String oldName = multipartFile.getOriginalFilename();
System.out.println(oldName);
String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
//儲存圖片
try {
multipartFile.transferTo(new File(f,newName));
//獲取路徑,動態獲取，因為有可能是http，也有可能是HTTPS
String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName;
return path ;
} catch (IOException e) {
e.printStackTrace();
}
return "error";
}
}第一步，建立檔案的存放地址，和路徑
第二步，修改檔名
第三步，儲存檔案（檔案件，和檔名）
後端的處理就完了，我們看一下前臺如何處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>檔案上傳</title> </head> <body> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="multipartFile"> <input type="submit" value="提交"> </form> </body> </html>
前端處理很簡單，就是開啟檔案上傳通道就可以了。
但是這種做法在前後端分離開發中很少使用，接下來我們看一下用ajax如何實現。
後端的不用變，前端的改成ajax的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax檔案上傳</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<script>
function uploads() {
alert("ss");
var multipartFile=$("#file")[0].files[0];
alert(multipartFile);
var formData=new FormData();
formData.append("multipartFile",multipartFile);
$.ajax({
type:'post',url:'/upload',processData:false,contentType:false,data:formData,success:function (msg) {
$("#result").html(msg);
}
} )
}
</script>
<body>
<form enctype="multipart/form-data">
<input type="file" id="file">
<input type="button" value="上傳" onclick="uploads()">
</form>
<div id="result"></div>
</body>
</html>
這個是單檔案上傳，如果是多檔案上傳，改如何處理呢？
後端處理
@PostMapping("/uploads")
//HttpServletRequest request獲取快取地址，一般這裡使用圖片伺服器
public String uploads(MultipartFile [] multipartFiles,HttpServletRequest request){
//圖片儲存在專案的執行路徑下
String format = ss.format(new Date());
String realpath = request.getServletContext().getRealPath("img") + format;
//建立儲存的資料夾
File f = new File(realpath);
if(!f.exists()){
f.mkdirs();
}
//用for迴圈獲取每個檔案
for (MultipartFile file: multipartFiles){
String oldName = file.getOriginalFilename();
String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
//儲存圖片
try {
file.transferTo(new File(f,newName));
//獲取路徑,動態獲取，因為有可能是http，也有可能是HTTPS
String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/img" + format + newName;
System.out.println(path);
} catch (IOException e) {
e.printStackTrace();
}
}
//因為檔名可能會重複，所以要對檔名進行修改
return "success";
}
前端處理：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>檔案上傳</title> </head> <body> <form action="/uploads" method="post" enctype="multipart/form-data"> <input type="file" name="multipartFiles" multiple> <input type="submit" value="提交"> </form> </body> </html>
就是把前端拿到的檔案存在數組裡，去遍歷每一個，和單檔案的做法一致。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。