Springboot2通过MultipartFile上传图片到服务端，并保存文件路径到数据库中
一、环境准备
系统：win11
开发环境：IDEA 2023.1.2 + Jdk8 + Springboot2.7.10
数据库：mysql5.7
二：背景
实现一个前端上传图片到后台服务器指定路径，并将路径存储在数据库中。
三、代码架构
pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.12</version>
<!--<scope>runtime</scope>-->
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<!-- alibaba的druid数据库连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.10</version>
</dependency>
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>20.0</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.5</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.2</version>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
</dependencies>springboot配置application.yml，这里最大文件设置默认是1MB，可以修改设置大一点，避免出现文件大小受限的错误。
server:
port: 8888
web:
upload-path: F:/zp/uploadImageDir
spring:
datasource:
url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 346498
driver-class-name: com.mysql.jdbc.Driver
servlet:
multipart:
enabled: true
max-file-size: 10MB
max-request-size: 50MB
mybatis:
mapper-locations: classpath:mapping/*.xml
注意：此处使用com.mysql.jdbc.Driver驱动器，启动项目会报一个告警
四、代码实战
sql
DROP TABLE IF EXISTS `tbl_imageInfo`;
CREATE TABLE `tbl_imageInfo` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`imgPath` varchar(300) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;Controller
为了避免产生上传重名文件导致的问题，在后台重新用UUID重新生成一个随机的文件名来保存
import com.pyy.service.ImageUploadService;
import com.pyy.utils.FileUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
@RestController
public class UploadImageController {
private static final Logger logger = LoggerFactory.getLogger(UploadImageController.class);
@Autowired
private ImageUploadService imageUploadService;
@Value("${web.upload-path}")
private String path;
@Value("${server.port}")
private String port;
@PostMapping("fileUpload")
public String upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "Upload file failed. File should not be empty.";
}
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
logger.error("Original file content type is {} name is: {}", contentType, fileName);
String newRandomFileName = FileUtils.generateRandomFileName(fileName);
try {
FileUtils.upload(file, path, newRandomFileName);
} catch (Exception e) {
System.out.println("Upload file exception: " + e.getMessage());
}
return "Upload img success，请到上传路径查看！" + imageUploadService.imageUpload(path + File.separator + newRandomFileName);
}
}FileUtils
public class FileUtils {
private static final Logger logger = LoggerFactory.getLogger(FileUtils.class);
/**
* @param file 文件
* @param fileName 新的随机文件名
*/
public static void upload(MultipartFile file, String destPath, String fileName) {
File dest = new File(destPath + File.separator + fileName);
//判断文件父目录是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
//保存文件
file.transferTo(dest);
} catch (Exception e) {
logger.error("Save file exception. {}", e.getMessage());
}
}
public static String getSuffix(String fileName) {
return fileName.substring(fileName.lastIndexOf("."));
}
public static String generateRandomFileName(String fileName) {
return UUID.randomUUID() + getSuffix(fileName);
}
}数据库映射接口mapper
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Component;
@Mapper
@Component
public interface UploadImageMapper {
int insertImgPath(String imagePath);
}Service：调用数据库接口保存文件路径
import com.pyy.mapper.UploadImageMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service("imageUploadService")
public class ImageUploadService {
@Autowired
private UploadImageMapper uploadImageMapper;
public String imageUpload(String filePath) {
int count = uploadImageMapper.insertImgPath(filePath);
return count >= 1 ? "Upload success." : "Upload failed.";
}
}mybatis映射xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.pyy.mapper.UploadImageMapper" >
<insert id="insertImgPath" parameterType="string">
insert into tbl_imageInfo(imgPath) values (#{imagePath})
</insert>
</mapper>首页index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="/fileUpload">
图片<input id="file_upload" type="file" name="file" onchange="imgChange(this)"/>
<input type="submit" value="上传"/>
</form>
<img id="uploaded_images" src="" style="width: 200px; height: 300px;" />
</body>
<script type="text/javascript">
<!--显示需要上传图片的所路途-->
// 选择图片显示
function imgChange(obj) {
// 获取点击的文本框
var file = document.getElementById("file_upload");
var imgUrl = window.URL.createObjectURL(file.files[0]);
var img = document.getElementById('uploaded_images');
img.setAttribute('src', imgUrl); // 修改img标签src属性值
};
</script>
</html>五、效果
点击上传之后，可以在指定的F:/zp/uploadImageDir目录下看到一个随机名称的图片，
然后查询数据库，可以看到图片保存的路径
