Spring Boot整合web層實現(xiàn)過程詳解
Spring Boot中對Spring MVC的文件上傳是一脈相傳的，我們雙擊shift去搜CommonsMultipartResolver這個類，它是文件上傳的一個實現(xiàn)類。我們先看一下源碼：
我們可以看到它是MultipartResolver的實現(xiàn)類，我們再Ctrl+H,就可以看到右側(cè)MultipartResolver的兩個實現(xiàn)類。第一個實現(xiàn)類在servlet3.0之后，什么都不用加，就可以直接使用。第二個實現(xiàn)類的兼容性要好一些，早期的servlet也可以使用，但需要自己額外的加依賴。那么在Spring Boot中，我們就可以直接使用第一個實現(xiàn)類去完成文件上傳。
只需要一個controller和一個靜態(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){ //圖片保存在項目的運行路徑下 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(); } //因為文件名可能會重復(fù)，所以要對文件名進(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)); //獲取路徑,動態(tài)獲取，因為有可能是http，也有可能是HTTPS String path = request.getScheme() + '://' + request.getServerName() + ':' + request.getServerPort() + '/img' + format + newName; return path ; } catch (IOException e) { e.printStackTrace(); } return 'error'; }}
第一步，創(chuàng)建文件的存放地址，和路徑
第二步，修改文件名
第三步，保存文件（文件件，和文件名）
后端的處理就完了，我們看一下前臺如何處理
<!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>
前端處理很簡單，就是開啟文件上傳通道就可以了。
但是這種做法在前后端分離開發(fā)中很少使用，接下來我們看一下用ajax如何實現(xiàn)。
后端的不用變，前端的改成ajax的：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>ajax文件上傳</title> <script src='http://m.lshqa.cn/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>
這個是單文件上傳，如果是多文件上傳，改如何處理呢？
后端處理
@PostMapping('/uploads') //HttpServletRequest request獲取緩存地址，一般這里使用圖片服務(wù)器 public String uploads(MultipartFile [] multipartFiles , HttpServletRequest request){ //圖片保存在項目的運行路徑下 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)獲取每個文件 for (MultipartFile file: multipartFiles){ String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf('.')); //保存圖片 try {file.transferTo(new File(f,newName));//獲取路徑,動態(tài)獲取，因為有可能是http，也有可能是HTTPSString path = request.getScheme() + '://' + request.getServerName() + ':' + request.getServerPort() + '/img' + format + newName;System.out.println(path); } catch (IOException e) {e.printStackTrace(); } } //因為文件名可能會重復(fù)，所以要對文件名進(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ù)組里，去遍歷每一個，和單文件的做法一致。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備