ssm整合实现图片上传功能

最新推荐文章于 2025-03-15 10:55:35 发布

长不大的燕子

最新推荐文章于 2025-03-15 10:55:35 发布

阅读量725

点赞数 7

文章标签： java 开发语言 spring servlet mybatis tomcat

本文链接：https://blog.youkuaiyun.com/m0_67457986/article/details/139737028

版权

我们在做一些项目或者页面的时候，肯定会涉及制作一个表格，比如说商品的表格。其中表格包含的信息除了名称，价格等之外，我们或许还会添加相应的图片，以至于更加直观的去感受商品。那么基于ssm框架的商品图片（文件）上传显示功能又将如何实现呢，下面着重来讲解。

一、实体类

实体类也是老生常谈了，比较固定死板，其实你通过不断的练习登录注册这些基本功能，你就会慢慢熟悉ssm这个框架的基本流程的，熟能生巧。注意这里实现图片上传需要实现序列化接口。具体什么是序列化接口，大家可以看其他博主的详细介绍，我这里不多余赘述，只是教大家如何简介快速实现这个功能。

你这里也不一定要和我一样，你可以设置其为id,image就行了，毕竟刚尝试为了练手，咱们只设置两个属性就行，数据库的名称要和其保持一致。

二、Dao层

在dao层里创建ImageDao，注意类型选择interface。

三、我们在service文件下再创建ImageService来实现接口相应功能。

然后再在service文件下创建ImageServiceImpl去实现刚才那个接口，这里需要调用dao层的ImageDao。

四、Controller层

Controller层来处理图片上传的逻辑，

    @Autowired
    private ImageService imageService;

    //查询，显示图片的
    @RequestMapping("/list.do")
    public String listUser( Model model){
        List<Image> list= imageService.list();
        model.addAttribute("list",list);
        System.out.println(list);
        return "list";
    }


    @RequestMapping("/addProduct.do")//添加图片页面
    public String fileUpload(MultipartFile file, Image image, ModelMap map) throws IOException {

        /**
         * 上传图片
         */
        //图片上传成功后，将图片的地址写到数据库
//      String filePath = "E:\\upload";//保存图片的路径,tomcat中有配置
        String filePath = "D:\\idea-workplaces\\mybatis_zsgc\\src\\main\\webapp\\images";
//        D:\idea-workplaces\mybatis_zsgc\src\main\webapp\images,这是我存放图片的路径，要根据自己的电脑路径选择
        //获取原始图片的拓展名
        String originalFilename = file.getOriginalFilename();
        //新的文件名字，使用uuid随机生成数+原始图片名字，这样不会重复
        String newFileName = UUID.randomUUID()+originalFilename;
        File targetFile = new File(filePath,newFileName);
   //把本地文件上传到已经封装好的文件位置的全路径就是上面的targetFile
        file.transferTo(targetFile);
        image.setPimage(newFileName);//文件名保存到实体类对应属性上
   //保存图片
        imageService.save(image);
        return "redirect:/list.do"; //重定向到查询
    }


    @RequestMapping("/image1")
    public String dfg(){
        return "image1";//我创建图片上传的jsp页面是image1,你们可直接用image,最后返回image就行
    }

    @RequestMapping("/list")
    public String list(){
        return "/image/list.jsp";
    }

五、Mapper

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.ImageDao">
    <!-- 查询所有图片 -->
    <select id="list" resultType="image">
        select * from image
    </select>
    <insert id="save" parameterType="image">
        insert into image(pimage) values(#{pimage})
    </insert>
</mapper>

六、Jsp页面

首先建一个image.jsp，主要用来实现选择文件的，页面显示如下所示

如果选择文件上传失败，可能是忘记加下面这一行，加在jsp页面的最上面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

继续创建list.jsp,用来显示上传图片的页面的，这里有很多小细节，记得当时我调试了好久才出来，特别注意你存放图片的文件夹和var里面的image名称一致。

pom文件记得导入这些依赖

<!--    实现图片上传功能的依赖包-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.2</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>

看到这你是不是以为就可以实现图片上传了？不，还有十分关键的一步，tomcat配置image文件