SSM上传图片并保存图片地址到数据库

说出来有点不好意思,还没写过上传图片的功能。最近接的一个外包项目因为有要用到这个功能,所以打算使用SSM实现图片上传的功能,上传好后把图片地址保存到数据库,同时在前端显示图片。

使用maven构建项目,首先导入相关的jar,这里就放上传文件的jar配置,不然篇幅太长了,其他的还有spring相关的,mybatis,日志的,数据库的,包括servlet和jstl相关的。

      <!-- 文件上传的jar包 -->
	  <dependency>
	    <groupId>commons-io</groupId>
	    <artifactId>commons-io</artifactId>
	    <version>2.4</version>
	  </dependency>
	  <dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.3.1</version>
	  </dependency>

配置好pom.xml后,接下来就是web.xml,只需要配置dispatcherServlet就行。

项目目录结构

接下来就是新建数据表

DROP TABLE IF EXISTS `product`;
CREATE TABLE `product`  (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `pimage` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`pid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

然后就是那一大堆配置文件,我就不写了,要注意的是在spring-web.xml中配置文件上传解析器

        <!-- 文件上传的解析器 -->
        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        	<!-- 上传图片的最大尺寸 10M-->
        	<property name="maxUploadSize" value="10485760"></property>
        	<!-- 默认编码 -->
        	<property name="defaultEncoding" value="utf-8"></property>
        </bean>

紧接着是mapper文件的编写,主要有两个sql,一个是图片上传,另一个是选择所有图片

    <mapper namespace="com.codeliu.dao.ProductDao">
    	<!-- 查询所有图片 -->
    	<select id="list" resultType="product">
    		select pid, pimage from product
    	</select>
    	
    	<insert id="save" parameterType="product">
    		insert into product(pimage) values(#{pimage})
    	</insert>
    </mapper>

接下来就是pojo,dao,service,controller类的编写

首先pojo

public class Product implements Serializable {

	private Integer pid;
	
	private String pimage;

    // set、get方法
}

其次dao

ublic interface ProductDao {
	
	/**
	 * 查询所有的图片
	 * @return
	 */
	List<Product> list();
	
	/**
	 * 上传一张图片
	 * @param product
	 * @return
	 */
	Integer save(Product product);
}

接着是service

@Service
public class ProductServiceImpl implements ProductService {
	
	@Autowired
	private ProductDao productDao;

	@Override
	public List<Product> list() {
		return productDao.list();
	}

	@Override
	@Transactional
	public String save(MultipartFile file, Product product, ModelMap map) throws IOException {
		
		// 保存图片的路径,图片上传成功后,将路径保存到数据库
		String filePath = "F:\\upload";
		// 获取原始图片的扩展名
		String originalFilename = file.getOriginalFilename();
		// 生成文件新的名字
		String newFileName = UUID.randomUUID() + originalFilename;
		// 封装上传文件位置的全路径
		File targetFile = new File(filePath, newFileName);
		file.transferTo(targetFile);	
		
		// 保存到数据库
		product.setPimage(newFileName);
		productDao.save(product);
		return "redirect:/listImages";
	}

}

最后是controller

@Controller
public class ProductController {

	@Autowired
	private ProductService productService;
	
	@RequestMapping("/listImages")
	public ModelAndView list(Model model) {
		List<Product> lists = productService.list();
		ModelAndView mav = new ModelAndView();
		mav.addObject("lists", lists);
		mav.setViewName("list");
		System.out.println(lists);
		return mav;
	}
	
	/**
	 * 保存图片
	 * @param file
	 * @param product
	 * @param map
	 * @return
	 */
	@RequestMapping("/save")
	public String save(MultipartFile file, Product product, ModelMap map) {
		try {
			return productService.save(file, product, map);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
}

上传图片的逻辑在service里面,注释很清楚,相信一看就能明白,接着写两个jsp页面,一个用于上传,一个用于显示。

<body>
	<form action="save" method="post" enctype="multipart/form-data">
		图片:<input type="file" name="file"><br>
		<input type="submit" value="提交">
	</form>
</body>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>list</title>
<style type="text/css">
	#images{
		width: 150px;
		height: 250px;
	}
</style>
</head>
<body>
	
	<table class="table table-bordered table-hover">
		<tr>
			<th>序号</th>
			<th>图片</th>
		</tr>
		<c:forEach items="${lists}" var="product">
			<tr>
				<td>${product.pid}</td>
				<td>
					<c:if test="${product.pimage != null}">
						<img alt="" src="/image/${product.pimage}" id="images">
					</c:if>
				</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

做好了上面的这些,还需要指定图片上传的位置,直接在tomcat中指定

万事俱备,只欠东风了。接下来就启动项目,输入localhost:8080/SSM_uploadImage/index.jsp,就可以选择图片进行上传,上传之后,可以看到数据库已经插入了一条记录,同时指定的目录下已经有图片了。

4.png

跳转到list.jsp,显示图片

5.png

关注微信公众号:秃头哥编程(ID:xp_1311664842),领取编程大礼包。
在这里插入图片描述

已标记关键词 清除标记
一、简介 通过这个课程带大家从零开发一款功能全面的后台管理系统,包括项目搭建、功能实现到最后的Linux系统部署全过程。本课程使用SpringMVC + Spring + Mybatis作为主体框架,使用AdminLTE作为前端框架,使用主流关系型数据库Mysql作为存储数据库,使用非关系型数据库Redis作为缓存数据库,并集成SpringSecuriy安全框架做权限的动态管理,集成Swagger2自动生成接口文档,集成Druid连接池进行SQL性能监控,集成ActiveMQ消息中间件进行异步解耦,提高性能。最后使用linux系统进行服务部署,并搭建nginx反向代理服务器提高网站性能。 二、学习目标 通过本课程的学习带大家掌握SSM框架的开发流程,并熟练使用SpringSecurity做为安全框架进行权限管理,整合相关优秀的开源框架进行功能开发。还在项目中带大家学习前端相关的Jquery、Bootstrap等知识。课程结束之后希望大家能做到独立进行开发项目的目的,增强解决问题的能力,具备功能落地实现的能力。 三、课程涉及知识点 SpringMVC源码分析 Mybatis源码分析 通用Mapper Mysql数据库 Redis缓存实现 ActiveMQ消息中间件 SpringSecurity鉴权 Swagger2接口文档生成 自定义注解 AOP切面编程 自定义过滤器 Logback日志整合 Druid性能监控 Linux系统 Nginx反向代理 Ajax异步请求技术 Jquery基本使用 AdminLTE前端框架 Chart图表-线状图和饼状图 百度地图定位城市 BootStrap前端框架 BootStrap-Table插件 BootStrap-Treeview插件 Markdown编辑器 403、404、500错误页面配置 数据库事务 消息提示插件toastr.js 图片上传插件bootstrap fileinput 数字滚动效果 pv/uv流量统计 ... 四、课程部分内容截图如下 1、首页 2、菜单管理 3、图床管理 4、图标管理 5、留言反馈管理 6、druid监控 7、登录日志
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页