SSM图片上传与显示并保存图片地址到数据库_ssm上传图片到数据库和文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45794474/article/details/108752805

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

项目目录结构

使用maven构建项目并导入相关jar包依赖

      <!-- 文件上传的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>

新建数据表

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

在dispatcherServlet-servlet.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>

PictureMapper.xml中保存图片和查询所有图片的sql语句编写

  <!-- 查询所有图片 -->
  <select id="list" resultType="com.bean.Picture">
    		select picture_id, picture_path from picture
  </select>
  <!-- 保存图片 -->
  <insert id="save" parameterType="com.bean.Picture">
    insert into picture(picture_path)
    value (#{picturePath,jdbcType=VARCHAR})
  </insert>

bean

public class Picture implements Serializable {
    private Integer pictureId;
    private String picturePath;
    //get 、set方法
}

dao

public interface PictureMapper {
    /**
     * 查询所有图片
     * @return
     */
    List<Picture> list();
    /**
     * 上传一张照片
     * @return
     */
    Integer save(Picture picture);
}

创建接口PictureService

public interface PictureService {
    List<Picture> list();

    void save(Picture picture);
}

PictureService接口的实现

@Service
@Transactional
public class PictureServiceImpl implements PictureService {

    //注入PictureMapper
    @Autowired
    private PictureMapper pictureMapper;

    @Override
    public List<Picture> list() {
        return pictureMapper.list();
    }

    @Override
    public void save(Picture picture) {
        pictureMapper.save(picture);
    }
}

创建PictureController

@Controller
public class PictureController {

    //注入pictureservice
    @Autowired
    private PictureService pictureService;
    
    //查询
    @RequestMapping("/list.do")
    public String listUser( Model model){
        List<Picture> list= pictureService.list();
        model.addAttribute("list",list);
        System.out.println(list);
        return "list";
    }

    @RequestMapping("/addPicture.do")
    public String fileUpload(MultipartFile file,Picture picture, ModelMap map) throws IOException {

        /**
         * 上传图片
         */
        //图片上传成功后，将图片的地址写到数据库
        String filePath = "E:\\IDEA\\TeamWebsite\\src\\images";//保存图片的路径,tomcat中有配置
        //获取原始图片的拓展名
        String originalFilename = file.getOriginalFilename();
        //新的文件名字，使用uuid随机生成数+原始图片名字，这样不会重复
        String newFileName = UUID.randomUUID()+originalFilename;
        //封装上传文件位置的全路径，就是硬盘路径+文件名
        File targetFile = new File(filePath,newFileName);
        //把本地文件上传到已经封装好的文件位置的全路径就是上面的targetFile
        file.transferTo(targetFile);
        picture.setPicturePath(newFileName);//文件名保存到实体类对应属性上

        /**
         * 保存图片
         */
        pictureService.save(picture);
        return "redirect:/list.do"; //重定向到查询
    }
}

显示列表list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
    <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>Insert title here</title>
    <style type="text/css">
        #images{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<table class="table table-bordered table-hover">
    <tr>
        <th>序号</th>
        <th>图片</th>
    </tr>
    <c:forEach items="${list}" var="picture" >
        <tr>
            <th>${picture.pictureId }</th>
            <th><c:if test="${picture.picturePath !=null }">
                <img id="images" alt="" src="/images/${picture.picturePath }">
            </c:if> </th>
        </tr>
    </c:forEach>
</table>
</body>
</html>

显示的首页index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<body>
<form action="addPicture.do" method="post" enctype="multipart/form-data">
    图片：<input type="file" name="file">
    <input type="submit" value="提交">
</form>
</body>
</html>