正文

SSM框架教你轻松实现图片上传与展示

/0 浏览量
0522

图片上传与展示是许多网站和应用程序中常见的功能。使用SSM（Spring + SpringMVC + MyBatis）框架可以大大简化这一过程。本文将带你详细了解如何在SSM框架下实现图片上传与展示。

1. 环境搭建

在开始之前，我们需要搭建SSM开发环境。以下是所需的基本组件：

  • Java Development Kit (JDK)
  • Integrated Development Environment (IDE) 如 IntelliJ IDEA 或 Eclipse
  • Tomcat Web服务器
  • Maven 或 Gradle 作为构建工具

确保你的环境中已经安装了以上工具和框架。

2. 添加依赖

在项目的 pom.xml 文件中，添加以下依赖项：

<dependencies>
    <!-- Spring 依赖 -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>5.3.10</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>5.3.10</version>
    </dependency>
    <!-- MyBatis 依赖 -->
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.5.7</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>2.0.6</version>
    </dependency>
    <!-- 数据库连接池依赖 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.24</version>
    </dependency>
    <!-- MySQL 依赖 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.26</version>
    </dependency>
    <!-- 文件上传依赖 -->
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
    </dependency>
</dependencies>

3. 配置文件

在项目的 resources 目录下创建 applicationContext.xml 和 spring-mvc.xml 文件，用于配置Spring和Spring MVC。

3.1 applicationContext.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">

    <!-- 数据源配置 -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <!-- 基本属性 -->
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost:3306/your_database?useSSL=false" />
        <property name="username" value="root" />
        <property name="password" value="root" />
        <!-- 初始化连接大小 -->
        <property name="initialSize" value="1" />
        <!-- 连接池最大使用连接数量 -->
        <property name="maxActive" value="20" />
        <!-- 连接池最小空闲连接数量 -->
        <property name="minIdle" value="1" />
        <!-- 获取连接最大等待时间 -->
        <property name="maxWait" value="60000" />
    </bean>

    <!-- MyBatis 会话工厂 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- 指定MyBatis配置文件路径 -->
        <property name="configLocation" value="classpath:mybatis-config.xml" />
    </bean>

    <!-- 扫描mapper接口 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.mapper" />
    </bean>
</beans>

3.2 spring-mvc.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 扫描Controller -->
    <context:component-scan base-package="com.example.controller" />
    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <!-- 文件上传解析器 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600" />
        <property name="maxInMemorySize" value="4096" />
    </bean>
    <!-- 开启注解驱动 -->
    <mvc:annotation-driven />
</beans>

4. 实现图片上传

接下来，我们将创建一个用于上传图片的Controller。

4.1 ImageUploadController.java

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping("/image")
public class ImageUploadController {

    @PostMapping("/upload")
    public String uploadImage(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        try {
            if (file != null && file.getOriginalFilename() != null) {
                String realPath = request.getServletContext().getRealPath("/upload");
                String fileName = file.getOriginalFilename();
                file.transferTo(new java.io.File(realPath, fileName));
            }
            return "redirect:/uploadSuccess.jsp";
        } catch (Exception e) {
            e.printStackTrace();
            return "redirect:/uploadError.jsp";
        }
    }
}

4.2 upload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片上传</title>
</head>
<body>
    <form action="image/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="上传" />
    </form>
</body>
</html>

5. 实现图片展示

接下来，我们将创建一个用于展示上传的图片的Controller。

5.1 ImageDisplayController.java

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/image")
public class ImageDisplayController {

    @GetMapping("/display")
    public String displayImages(Model model) {
        File folder = new File("upload");
        List<String> images = new ArrayList<>();
        if (folder.exists()) {
            for (File file : folder.listFiles()) {
                if (file.isFile()) {
                    images.add("upload/" + file.getName());
                }
            }
        }
        model.addAttribute("images", images);
        return "imageDisplay";
    }
}

5.2 imageDisplay.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片展示</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h2>图片展示</h2>
    <c:forEach items="${images}" var="image">
        <img src="${image}" />
    </c:forEach>
</body>
</html>

6. 运行程序

现在，我们可以运行程序并访问上传和展示图片的功能了。

  • 访问 http://localhost:8080/upload.jsp 上传图片。
  • 上传图片后，访问 http://localhost:8080/image/display 查看图片展示。

恭喜你，你已经成功实现了SSM框架下的图片上传与展示功能！

-- 展开阅读全文 --