图片上传与展示是许多网站和应用程序中常见的功能。使用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框架下的图片上传与展示功能!
