Spring Boot 實現(xiàn)圖片上傳并回顯功能
1 項目結(jié)構(gòu)
2 配置文件及環(huán)境設(shè)置
（1）配置文件
# 應(yīng)用服務(wù) WEB 訪問端口server.port=8080# spring 靜態(tài)資源掃描路徑spring.resources.static-locations=classpath:/static/# 訪問template下的html文件需要配置模板spring.thymeleaf.prefix.classpath=classpath:/templates/# 是否啟用緩存spring.thymeleaf.cache=false# 模板文件后綴spring.thymeleaf.suffix=.html# 模板文件編碼spring.thymeleaf.encoding=UTF-8#上傳的絕對路徑file.upload.path=G://images/ #最關(guān)鍵##絕對路徑下的相對路徑file.upload.path.relative=/images/** #最關(guān)鍵##設(shè)置文件最大值spring.servlet.multipart.max-file-size=5MB
在相關(guān)路徑新建文件夾
3 代碼
（1）pom.xml
<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>
（2）index.html
<!DOCTYPE html><html lang='en' xmlns:th='http://www.w3.org/1999/xhtml'><head> <meta charset='UTF-8'> <title>Title</title></head><body><form action='../upload' method='post' enctype='multipart/form-data'> <input type='file' name='file' accept='image/*'> <br> <input type='text' value=''> <input type='submit' value='上傳' class='btn btn-success'></form>[[${filename}]]<br><img th:src='http://www.gepszalag.com/bcjs/@{${filename}}' alt='圖片'></body></html>
（3）TestController.java
import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;@Controllerpublic class TestController { /** * 上傳地址 */ @Value('${file.upload.path}') private String filePath; // 跳轉(zhuǎn)上傳頁面 @RequestMapping('test') public String test() {return 'Page'; } // 執(zhí)行上傳 @RequestMapping('upload') public String upload(@RequestParam('file') MultipartFile file, Model model) {// 獲取上傳文件名String filename = file.getOriginalFilename();// 定義上傳文件保存路徑String path = filePath + 'rotPhoto/';// 新建文件File filepath = new File(path, filename);// 判斷路徑是否存在，如果不存在就創(chuàng)建一個if (!filepath.getParentFile().exists()) { filepath.getParentFile().mkdirs();}try { // 寫入文件 file.transferTo(new File(path + File.separator + filename));} catch (IOException e) { e.printStackTrace();}// 將src路徑發(fā)送至html頁面model.addAttribute('filename', '/images/rotPhoto/' + filename);return 'index'; }}
（4）MyWebAppConfigurer
import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * 資源映射路徑 */@Configurationpublic class MyWebAppConfigurer implements WebMvcConfigurer { /** * 上傳地址 */ @Value('${file.upload.path}') private String filePath; /** * 顯示相對地址 */ @Value('${file.upload.path.relative}') private String fileRelativePath; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(fileRelativePath).addResourceLocations('file:/' + filePath); }}
4 測試
1 前端ajax
<div class='modal-body'> <form method='post' enctype='multipart/form-data'><input type='file' name='file' id='img'><input type='button' value='上傳' onclick='uploadFile()' style='width: 30%;'> </form></div><script>//上傳文件function uploadFile() { //formData里面存儲的數(shù)據(jù)形式，一對key/value組成一條數(shù)據(jù)，key是唯一的，一個key可能對應(yīng)多個value var myform = new FormData(); // 此時可以調(diào)用append()方法來添加數(shù)據(jù) myform.append(’file’, $('#img')[0].files[0]); //驗證不為空 var file = $('#img')[0].files[0]; if (file == null) {alert('請選擇文件');return false; } else {$.ajax({ url: '/user/upLoad', type: 'POST', data: myform, async: false, contentType: false, processData: false, success: function (result) {console.log(result);alert('上傳成功！');$('#div_show_img').html('<img id=’input_img’ src=’' + result + '’>');$('#imgPath').attr('value', result);$('#div_upload').removeClass('show'); }, error: function (data) {alert('系統(tǒng)錯誤'); }}); }}</script>
2 后端Controller
@ResponseBody@RequestMapping('/upLoad')public String upLoadImage(@RequestParam('file') MultipartFile file) { // 獲取上傳文件名 String filename = file.getOriginalFilename(); String suffixName = filename.substring(filename.lastIndexOf('.')); // 定義上傳文件保存路徑 String path = filePath + 'images/'; //生成新的文件名稱 String newImgName = UUID.randomUUID().toString() + suffixName; // 新建文件 File filepath = new File(path, newImgName); // 判斷路徑是否存在，如果不存在就創(chuàng)建一個 if (!filepath.getParentFile().exists()) {filepath.getParentFile().mkdirs(); } try {// 寫入文件file.transferTo(new File(path + File.separator + newImgName)); } catch (IOException e) {e.printStackTrace(); } return '/images/images/' + newImgName;}
到此這篇關(guān)于Spring Boot 實現(xiàn)圖片上傳并回顯功能的文章就介紹到這了,更多相關(guān)Spring Boot上傳圖片回顯內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. JSP動態(tài)網(wǎng)頁開發(fā)原理詳解2. XHTML 1.0：標(biāo)記新的開端3. vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作4. python如何使用騰訊云發(fā)送短信5. .NET6使用ImageSharp實現(xiàn)給圖片添加水印6. python基于win32實現(xiàn)窗口截圖7. WML學(xué)習(xí)之六 事件8. 詳解Java關(guān)于時間格式化的方法9. Vue中使用Echarts儀表盤展示實時數(shù)據(jù)的實現(xiàn)10. PHP擴(kuò)展之URL編碼、解碼及解析——URLs
網(wǎng)公網(wǎng)安備