SSM學習記錄（八）——圖片的上傳與顯示
阿新 • • 發佈：2019-01-25
2018.5.9
僅為個人理解 不足之處歡迎指正~
本文以“上傳與預覽使用者頭像”的形式實現圖片的上傳與顯示
上傳的位置為專案檔案內部
圖片儲存位置：
webapp下的userhead資料夾
第一步：匯入所需包
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency>
第二步：上傳頁面的編寫
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>上傳測試頁</title> </head> <body> <form action="upload.action" method="post" enctype="multipart/form-data"> <label>使用者名稱：</label><input type="text" name="username"><br> <label>密碼：</label><input type="password" name="password"><br> <label>上傳頭像：</label><input type="file" name="file"><br> <input type="submit"> </form> </body> </html>
一定要注意寫：
傳送"upload.action"指令 將頭像與使用者名稱同時上傳
第三步：Controller的編寫
@RequestMapping("/upload") public String upload (@RequestParam("username")String username,@RequestParam("password") String password,MultipartFile file,HttpServletRequest request,Model model) throws Exception { String sqlPath=null;//儲存資料庫的路徑 String filename=null;//定義檔名 String contentType=file.getContentType(); //獲取檔案型別（字尾） //因為獲取的字尾是XXXX/xxx形式 contentType=contentType.substring(contentType.indexOf("/")+1); filename=username+"."+contentType; System.out.println(filename); String url = request.getSession().getServletContext().getRealPath("/userhead"); System.out.println(url); url=url+"/"; file.transferTo(new File(url+filename));//儲存圖片 User u=userService.userMessage(username); u.setHead("userhead/"+filename); System.out.println("頭像為："+u.getHead()); model.addAttribute("user",u); return "showImage"; }
注意點：
1.這個攔截器僅攔截了上傳的指令 而訪問頁面的指令攔截為：
2.本文將頭像儲存在專案中 專案釋出在tomcat上 故本文的儲存路徑為：
3.獲取字尾名與獲取絕對路徑的函式所得到的結果均不能直接用來儲存/讀取檔案 需要加上一些字串修改的操作
4.本文以與頭像一併上傳的使用者名稱作為頭像名稱 然後將頭像的路徑儲存在了User類的一個String中
5.MultipartFile需要在Spring中進行配置
<!--檔案上傳-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<property name="maxInMemorySize" value="10240"/>
<property name="maxUploadSize" value="-1"/>
</bean>第四步：SpringMVC配置檔案的修改
一定要在SpringMVC的配置檔案中加上
才能對靜態資源訪問
第五步：顯示頁面的編寫
showImage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>歡迎</title>
</head>
<body>
<img src="${user.head}"> 使用者名稱：${user.username}
</body>
</html>測試結果：
總結：
第四步的配置尤為重要 這一點卡了一晚上 最後也是參考了許多其他的文章
才搞清楚SSM對於靜態資源的訪問需要配置這一點
之前圖片的src路徑總是莫名其妙多出一些專案名之類的字元
或者F12看著路徑對了但是圖片還是顯示不出來
圖片路徑應該是與使用者資訊一起儲存在資料庫中的
然後讀取的時候也是讀取資料庫中的路徑
這裡直接用set和get方法在一個User類中存取
因為之前的sql懶得改了~
謝謝~