SSM學習記錄(八)——圖片的上傳與顯示

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懶得改了~


謝謝~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章