说出来有点不好意思，还没写过上传图片的功能。最近接的一个外包项目因为有要用到这个功能，所以打算使用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.monsMultipartResolver"><!-- 上传图片的最大尺寸 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
@Servicepublic class ProductServiceImpl implements ProductService {@Autowiredprivate ProductDao productDao;@Overridepublic List<Product> list() {return productDao.list();}@Override@Transactionalpublic 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
@Controllerpublic class ProductController {@Autowiredprivate 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="/jsp/jstl/core" prefix="c"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css"/><script src="/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，就可以选择图片进行上传，上传之后，可以看到数据库已经插入了一条记录，同时指定的目录下已经有图片了。
跳转到list.jsp，显示图片
关注微信公众号：秃头哥编程（ID：xp_1311664842），领取编程大礼包。
