Spring Boot整合web層實(shí)現(xiàn)過(guò)程詳解
Spring Boot中對(duì)Spring MVC的文件上傳是一脈相傳的，我們雙擊shift去搜CommonsMultipartResolver這個(gè)類，它是文件上傳的一個(gè)實(shí)現(xiàn)類。我們先看一下源碼：
我們可以看到它是MultipartResolver的實(shí)現(xiàn)類，我們?cè)貱trl+H,就可以看到右側(cè)MultipartResolver的兩個(gè)實(shí)現(xiàn)類。第一個(gè)實(shí)現(xiàn)類在servlet3.0之后，什么都不用加，就可以直接使用。第二個(gè)實(shí)現(xiàn)類的兼容性要好一些，早期的servlet也可以使用，但需要自己額外的加依賴。那么在Spring Boot中，我們就可以直接使用第一個(gè)實(shí)現(xiàn)類去完成文件上傳。
只需要一個(gè)controller和一個(gè)靜態(tài)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;@RestControllerpublic class UploadController { SimpleDateFormat ss=new SimpleDateFormat('yyyy/MM/dd/'); @PostMapping('/upload') //HttpServletRequest request獲取緩存地址，一般這里使用圖片服務(wù)器 public String upload(MultipartFile multipartFile , HttpServletRequest request){ //圖片保存在項(xiàng)目的運(yùn)行路徑下 String format = ss.format(new Date()); String realpath = request.getServletContext().getRealPath('img') + format; //創(chuàng)建保存的文件夾 File f = new File(realpath); if(!f.exists()){ f.mkdirs(); } //因?yàn)槲募赡軙?huì)重復(fù)，所以要對(duì)文件名進(jìn)行修改 String oldName = multipartFile.getOriginalFilename(); System.out.println(oldName); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf('.')); //保存圖片 try { multipartFile.transferTo(new File(f,newName)); //獲取路徑,動(dòng)態(tài)獲取，因?yàn)橛锌赡苁莌ttp，也有可能是HTTPS String path = request.getScheme() + '://' + request.getServerName() + ':' + request.getServerPort() + '/img' + format + newName; return path ; } catch (IOException e) { e.printStackTrace(); } return 'error'; }}
第一步，創(chuàng)建文件的存放地址，和路徑
第二步，修改文件名
第三步，保存文件（文件件，和文件名）
后端的處理就完了，我們看一下前臺(tái)如何處理
<!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>
前端處理很簡(jiǎn)單，就是開啟文件上傳通道就可以了。
但是這種做法在前后端分離開發(fā)中很少使用，接下來(lái)我們看一下用ajax如何實(shí)現(xiàn)。
后端的不用變，前端的改成ajax的：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>ajax文件上傳</title> <script src='http://m.b3g6.com/bcjs/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>
這個(gè)是單文件上傳，如果是多文件上傳，改如何處理呢？
后端處理
@PostMapping('/uploads') //HttpServletRequest request獲取緩存地址，一般這里使用圖片服務(wù)器 public String uploads(MultipartFile [] multipartFiles , HttpServletRequest request){ //圖片保存在項(xiàng)目的運(yùn)行路徑下 String format = ss.format(new Date()); String realpath = request.getServletContext().getRealPath('img') + format; //創(chuàng)建保存的文件夾 File f = new File(realpath); if(!f.exists()){ f.mkdirs(); } //用for循環(huán)獲取每個(gè)文件 for (MultipartFile file: multipartFiles){ String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf('.')); //保存圖片 try {file.transferTo(new File(f,newName));//獲取路徑,動(dòng)態(tài)獲取，因?yàn)橛锌赡苁莌ttp，也有可能是HTTPSString path = request.getScheme() + '://' + request.getServerName() + ':' + request.getServerPort() + '/img' + format + newName;System.out.println(path); } catch (IOException e) {e.printStackTrace(); } } //因?yàn)槲募赡軙?huì)重復(fù)，所以要對(duì)文件名進(jìn)行修改 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>
就是把前端拿到的文件存在數(shù)組里，去遍歷每一個(gè)，和單文件的做法一致。以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用Python webdriver圖書館搶座自動(dòng)預(yù)約的正確方法2. Python字符串到字節(jié)的轉(zhuǎn)換。雙反斜杠問(wèn)題3. Python sublime安裝及配置過(guò)程詳解4. Linux刪除系統(tǒng)自帶版本Python過(guò)程詳解5. Python 合并拼接字符串的方法6. Python3 json模塊之編碼解碼方法講解7. python 使用事件對(duì)象asyncio.Event來(lái)同步協(xié)程的操作8. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條9. Java Long類型對(duì)比分析10. ASP基礎(chǔ)知識(shí)VBScript基本元素講解
網(wǎng)公網(wǎng)安備