一、环境准备

系统：win11

开发环境：IDEA 2023.1.2 + Jdk8 + Springboot2.7.10

数据库：mysql5.7

二：背景

实现一个前端上传图片到后台服务器指定路径，并将路径存储在数据库中。

三、代码架构

pom.xml

org.springframework.bootspring-boot-starter-jdbcorg.springframework.bootspring-boot-starter-weborg.mybatis.spring.bootmybatis-spring-boot-starter1.3.2mysqlmysql-connector-java8.0.12<!--runtime-->com.alibabadruid1.1.10com.alibabadruid-spring-boot-starter1.1.10com.google.guavaguava20.0org.apache.commonscommons-lang33.5commons-collectionscommons-collections3.2.2org.projectlomboklomboktrue

springboot配置application.yml，这里最大文件设置默认是1MB，可以修改设置大一点，避免出现文件大小受限的错误。

server:port: 8888web:upload-path: F:/zp/uploadImageDirspring:datasource:url: jdbc:mysql://localhost:3306/test" />
四、代码实战
 
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;@RestControllerpublic class UploadImageController {private static final Logger logger = LoggerFactory.getLogger(UploadImageController.class);@Autowiredprivate 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@Componentpublic 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 {@Autowiredprivate UploadImageMapper uploadImageMapper;public String imageUpload(String filePath) {int count = uploadImageMapper.insertImgPath(filePath);return count >= 1 ? "Upload success." : "Upload failed.";}}
mybatis映射xml
insert into tbl_imageInfo(imgPath) values (#{imagePath})
首页index.html
Upload Image图片// 选择图片显示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属性值};
五、效果
点击上传之后，可以在指定的F:/zp/uploadImageDir目录下看到一个随机名称的图片，
然后查询数据库，可以看到图片保存的路径