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


谢谢~

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