vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主題
Spring Boot文件上傳(Form表單和Ajax方式)
在Spring Boot中，和文件上傳的主要和MultipartResolver接口有關，他有兩個實現類
StandardServletMultipartResolver和CommonsMutipartResolver。這兩個類都可以實現文件文件的上傳功能。
其中CommonsMutipartResolver是使用Commons-fileupload來實現multipart請求的。而StandardServletMultipartResolver是使用Servlet3.0來實現的。由于在Spring boot中的tomcat的版本都是7.0以上的版本。已經內置了Servlet3.0。所以我們可以直接實現StandardServletMultipartResolver,而不需要添加任何依賴即可。這也是我推薦大家的方式。
下面通過一個案例來說明文件的上傳如何實現
A）form表單文件上傳
案例：實現單文件的上傳功能。
實現步驟：
01創建工程，工程名為chapter03-upload，添加web依賴即可。
過程省略。
02創建包controller，并創建類FileUploadController。
@Controller
public class FileUploadController {
private SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/");
@PostMapping("/upload")
@ResponseBody
public String upload(MultipartFile uploadFile, HttpServletRequest request){
//1、查看是否存在上傳文件夾，如果不存在就創建
String realPath=request.getServletContext().getRealPath("/upload");
String format=sdf.format(new Date());
File folder=new File(realPath+format);
if(!folder.exists()){
folder.mkdirs();
}
String oldName=uploadFile.getOriginalFilename();
String newName= UUID.randomUUID().toString()+oldName.substring(oldName.lastIndexOf("."),oldName.length());
try {
uploadFile.transferTo(new File(folder,newName));
String filePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/upload"+format+newName;
return filePath;
} catch (IOException e) {
e.printStackTrace();
}
return "error";
}
}
-----------------------------------------------------------------------------------------------
03.在resources下面的static文件下創建index.html文件，編寫上傳的表單。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上傳</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
請選擇上傳文件：<input type="file" name="uploadFile" id="uploadFile">
<input type="submit" name="btnUpload" value="上傳">
</form>
</body>
</html>
-----------------------------------------------------------------------------------------------
如果需要對上傳的過程做精確的控制，可以參考第4步。
04根據需要在application.properties中做相關的配置。
這一步不是必須的，這點編寫注意。
#每次上傳單個文件的默認的大小是1M，注意M要大寫
spring.servlet.multipart.max-file-size=1M
#上傳的文件的總的大小是10M
spring.servlet.multipart.max-request-size=10M
#每次上傳文件的臨界值，每次上傳的時候不可能把文件全部寫到內存，達到多少不寫內存寫硬盤
spring.servlet.multipart.file-size-threshold=0B
#當文件先臨時寫硬盤，寫文件的位置
spring.servlet.multipart.location=E:/
#是否啟動MultipartResolver進行文件上傳
spring.servlet.multipart.enabled=true
-----------------------------------------------------------------------------------------------
很多時候需要進行前后端的分離開發，此時文件上傳一般都是Ajax進行文件的上傳操作。
B）Ajax文件上傳案例演示
實現步驟：
構造工程我們不再進行構建，直接用上面的工程即可。后端我們寫不需要修改，我們只需要在static文件夾中重新新建一個文件upload.html，添加JQuery文件，采用Ajax即可。
01在static中添加JQuery。
02在static中添加upload.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div id="result"></div>
<input type="file" name="file" id="file">
<input type="button" name="btnUpload" value="上傳" οnclick="uploadFile()">
</body>
<script type="application/javascript">
function uploadFile() {
//首先獲得JQuery對象，然后通過[0]轉成Js對象。files是所有上傳文件，這里是單文件上傳，因此[0]獲得第1個上傳文件即可
var file=$("#file")[0].files[0];
//創建上傳表單
var formData=new FormData();
//將數據添加到上傳表單,注意key的值和后臺MultipartFile的文件名相同，特別提醒注意。
formData.append("uploadFile",file);
$.ajax({
type:"post",
url:"/upload",
processData:false,//上傳的數據是否需要處理成對象，這里不用
contentType:false,//避免JQuery設置請求頭，它可能會破會分隔符，分隔符是用來確認上傳文件的起始位置的。
data:formData,
success:function (msg) {
$("#result").html(msg);
}
})
}
</script>
</html>
-----------------------------------------------------------------------------------------------
03.測試，即可完成文件上傳。
整個工程的結構如下所示：
這里需要說明的是大家必須把js中的注釋部分閱讀一下。很多同學可能對這種方式不是很熟悉。
總結
以上是生活随笔為你收集整理的vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pytest teardown 未执行_
- 下一篇： axios获取图片显示_vue中使用ax