SpringBoot图片上传与回显
程序员文章站
2022-03-27 20:37:34
...
版权声明：本文为 小异常 原创文章，非商用*转载-保持署名-注明出处，谢谢！
本文网址：https://sunkuan.blog.csdn.net/article/details/108080313
文章目录
最近在做 图片上传与回显 的功能，由于很久没写上传文件功能，遇到了不少问题，查阅了很多相关资料，特写一篇博客来总结。
本篇博客主要讲解 图片文件的上传与回显，以 Demo 形式进行展示。本 Demo 使用 Spring Boot 为基础架构，不涉及任何有关的数据库操作，还用了一点点的 Thymeleaf，方便初学者学习整理。
一、具体操作
1、准备工作
1）Maven 依赖
<!-- Thymeleaf 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Spring Web 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2）两个页面
-
file.html（表单页面）
<body> <form action="fileUpload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="提交"> </form> </body> -
show.html（显示页面）
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <img th:src="${filePath}"><br> <a href="file">继续上传</a> </body> </html>
3）两个工具类
-
FileNameUtils（文件名称工具类）
/** * 文件名称工具类 */ public class FileNameUtils { /** * 获取文件后缀 * @param fileName 文件名 * @return */ public static String getSuffix(String fileName) { return fileName.substring(fileName.lastIndexOf(".")); } /** * 生成新的文件名（这里采用UUID来生成文件名） * @param fileOriginName 源文件名 * @return */ public static String getFileName(String fileOriginName) { return UUIDUtils.getUUID() + FileNameUtils.getSuffix(fileOriginName); } } -
UUIDUtils（UUID 工具类）
/** * UUID 工具类 */ public class UUIDUtils { /** * 将生成的 UUID 中的 - 去掉（去除UUID中的特殊符号） * @return */ public static String getUUID() { return UUID.randomUUID().toString().replace("-", ""); } }
2、配置文件（application.yml）
server:
port: 8888
spring:
# Thymeleaf 配置
thymeleaf:
prefix: classpath:/templates/
suffix: .html
cache: false
# 文件上传位置
file-path: C:/inspection/
3、控制器
@Controller
public class FileController {
/**
* 从配置文件中获取文件路径
*/
@Value("${file-path}")
private String filePath;
/**
* 跳转页面
*/
@RequestMapping("/file")
public String file() {
return "file";
}
/**
* 提交表单
*/
@RequestMapping("/fileUpload")
public ModelAndView fileUpload(MultipartFile file) throws Exception {
ModelAndView modelAndView = new ModelAndView();
// 获取文件名
String fileName = FileNameUtils.getFileName(file.getOriginalFilename());
// 获取后缀名
String suffixName = FileNameUtils.getSuffix(fileName);
// 支持的文件格式
List<String> suffixList = Arrays.asList(".jpg", ".png");
// 判断上传的文件格式是否支持
if (!suffixList.contains(suffixName)) {
System.err.println("文件后缀名有误，支持的后缀名为：" + suffixList);
modelAndView.setViewName("show");
modelAndView.addObject("filePath", "zw.png"); // 自备的暂时无图的图片
return modelAndView;
}
// 设置图片的存储位置
String filePath = this.filePath;
// 文件路径
String path = filePath + fileName;
File dest = new File(path);
// 判断该目录是否存在
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir(); // 创建目录
}
try {
file.transferTo(dest); // 上传图片
System.out.println("=====文件上传成功！");
} catch (IOException e) {
System.err.println("=====上传失败！" + e.toString());
}
modelAndView.setViewName("show");
modelAndView.addObject("filePath", path);
return modelAndView;
}
}
二、目录结构与测试
1、目录结构
2、测试
1）上传成功回显页面
报错了？别担心！因为测试，我将上传路径写到 C 盘某个目录下，由于谷歌浏览器出于安全考虑，是禁止直接访问磁盘文件，所以此时不会将图片进行显示。我们在实际项目中应该将上传路径写成服务器的某个文件夹，这样就能正常访问该图片了。
2）上传失败回显页面
3、源代码
本篇博客的源代码我已上传到 CSDN 上，请有需要的小伙伴进行下载。
上一篇： servlet是什么
下一篇： jsp页面的本质是什么?