SpringBoot上传⽂件图⽚图⽚显⽰
⼀、⽂章前⾔
1. 本⽂章主要讲述如何在spring boot下上传⽂件，尤其是上传图⽚并显⽰，例如⽤户注册的时候上传了头像，此时头像会加载在注册页⾯上⾯，在Spring MVC的时候，这样实现还好实现，但是到了Spring Boot就并不是这样
2. ⼩伙伴也发现了，在使⽤部署到Tomcat服务器形式的项⽬，上传到的图⽚直接上传到Tomcat服务器中，都能访问，但是在Spring Boot中，内嵌的Tomcat，每次都是启动⼀个新的Tomcat，位置并不固定
3. 于是就带来了⼀个问题，第⼀次上传到了Tomcat中，能访问，但是⼀重启项⽬，Game Over
4. 所以本⽂章和⼤家⼀起学习下，如何在Spring Boot中指定⽂件上传路径和访问路径中的资源，这样就可以把保存图⽚和项⽬分开，独⾃管理
5. ⽂章中主要使⽤Spring Boot & Thymeleaf & Maven来演⽰，不会Thymeleaf的朋友不⽤担⼼，⽤的东西很少，和JSP差不多
⼆、环境搭建
2.1 Spring Boot的静态资源访问
我的大学生活总结1. 通常项⽬js、css、gif、html、xml、avi等⽂件都算是静态资源，静态资源的访问主要有两种⽅式：Spring Boot约定的⽬录、⾃⼰指定静态资源路径
2. Spring Boot约定的⽬录有四个，照存放路径约定，默认将会放到以下src/main/resources下的4个⽬录中
META-INF/resources
resources
清明节表达对已故亲人的思念static国庆节的赞美句子
public
优先级：META-INF/resources > resources > static > public
3. 通常我们会放到static中，但是⼀般像图⽚、视频等资源都是分开存储，所以常常需要指定静态资源访问路径
4. ⽽⾃定义路径我们需要实现WebMvcConfigurer接⼝，然后覆写addResourceHandlers⽅法添加资源映射路径，需要调⽤registry的addResourceHandler("/**").addResourceLocations("classpath:/路径/")完成映射添加（对这个接⼝不熟悉的朋友建议先学习下，本篇⽂章主要是⽂件上传，不会对此借⼝做详细介绍），完成之后就可以将我们⾃⼰的⽬录映射为⼀个资源路径
5. 上传⽂件主要使⽤MultipartFile类完成，所以⽂件上传的两个核⼼就是MultipartFile类和WebMvcConfigurer接⼝
2.2 Spring Boot环境搭建
1. 有了以上简单的了解后，我们现在开始搭建Spring Boot环境，环境主要使⽤IDEA+Spring Initializr创建，相信都看到这篇⽂档了，相信创建项⽬以及是基本功，废话少说进⼊正题
2. 创建完成我们需要加⼊Thymeleaf的依赖，如果采⽤别的模板引擎，根据⾃⼰的情况添加
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3. 打开application.properties配置⽂件（如果你是yml简单改⼀些就⾏），我们在配置⽂件中配置四个内容
修改Tomcat端⼝（⾮必须，默认8080）
配置Thymeleaf
配置Spring MVC
配置⽂件路径（在配置⽂件中配置⽐代码中写死要好）
4. 根据第三点我们配置application.properties的内容如下
user.file.path=⾃⼰想要保存⽂件的⽬录，默认不要忘了/或者\\
user.file.name=⽂件上传名称，真实项⽬中可以动态⽣成，这⾥为了演⽰写死
配置Thymeleaf，模式、编码、不使⽤缓存
de=HTML
ding=UTF-8
spring.thymeleaf.cache=false
Spring MVC视图配置，相信⼤家很熟悉了，直接⾛
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html
1公顷等于多少平方米# 修改服务器端⼝
server.port=8888
# Thymeleaf
de=HTML
ding=UTF-8
spring.thymeleaf.cache=false
# Spring MVC
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.html
# ⽂件路径, 注意路径末尾⼀定要带上/
user.file.path=F:/img/
user.file.name=springboot.jpg
5. 配置完以上简单的项⽬框架算是有了，接下类我们开始实现
三、前端界⾯
1. 前端界⾯⽐较简单，就⼀个显⽰图⽚的img标签和⼀个上传⽂件的表单
2. 注意Thymeleaf中html⽂件需要⽅法resources的templates⽬录下，⽂件名index.html就⾏
3. 编写HTML
在HTML标签上引⼊thymeleaf的名称空间：xmlns:th=""
编写img标签，使⽤th语法指定img的资源路径：<img th:src="${filePath}">
十大奇案编写上传表单：这⾥⽐较简单，就不做介绍了，注意的是input为file的name需要记录，因为这个name必须要和控制器中MultipartFile的变量名相同，如果不同需要使⽤@RequestParam("file上传标签的name值")指定，截图和源码分别如下
<!DOCTYPE html>
<html lang="en" xmlns:th="">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<img th:src="${filePath}">
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="pic">
<input type="submit">
</form>
</body>
</html>
4. 简单启动项⽬，输⼊访问地址就可以看到下⾯简陋的东西~~
四、上传实现
1. 上传⽂件建⽴⼀个controller，把我们配置⽂件中指定的⽂件名和路径使⽤@Value注解注⼊进来
2. 在⽅法参数中指定MultipartFile，注意返回值使⽤了ModelAndView是为了图⽚显⽰的时候将值回传回去
参数为@RequestParam("pic") MultipartFile multipartFile 或者 MultipartFile pic，注意这个pic和表单中的⽂件标签的name值⼀样
创建⼀个⽂件File file = new File(filePath + OriginalFilename());
调⽤MultipartFile 的ansferTo(file)保存⽂件即可，是不是很简单
/**
* 上传⽂件控制器
*
* @param multipartFile ⽂件上传类
* @return ModelAndView
*/
@RequestMapping("/upload")
public ModelAndView update(@RequestParam("pic") MultipartFile multipartFile) {
try {
// 保存图⽚
File file = new File(filePath + OriginalFilename());
} catch (IOException e) {武汉科技大学是211吗
e.printStackTrace();
}
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
return modelAndView;
}
3. 启动项⽬，我们测试⼀下⽂件上传（此时还是⽂件上传，并⾮图⽚显⽰），选择⽂件，然后提交，⽐如此处上传⼀个Redis-Docker的脚
本，上传完成后可以在配置⽂件中指定的⽬录下看到该⽂件证明上传成功，⽂件上传没有问题就开始上传图⽚并显⽰
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论