Requirement:
Write a file upload function to upload files to a specified folder.
Then the file is echoed after the upload is successful.
★ Spring Boot provides automatic configuration support for file uploads
Spring Boot的文件上传自动配置主要由 MultipartAutoConfiguration 和 MultipartProperties 两个类组成。
MultipartProperties负责加载 spring.servlet.multipart.* 开头的配置属性。
MultipartAutoConfiguration 则根据 MultipartProperties 读取的配置属性来初始化
StandardServletMultipartResolver 解析器对象。
MultipartAutoConfiguration: Class that handles file uploads.
MultipartProperties: Attribute processing class, used to read the configuration properties starting with spring.servlet.multipart.* in the configuration file
★ Configuration properties related to file upload, supported by the MultipartProperties class
# 设置每个文件上传域的最大大小
spring.servlet.multipart.max-file-size=10MB
# 设置整个请求支持的最大大小
spring.servlet.multipart.max-request-size=50MB
# 设置文件上传的中转目录
spring.servlet.multipart.location=d:/temp
★ Steps for file upload
(1) File requests on the front-end page are submitted in the "multipart/form-data" encoding method.
(2) Define attributes of the MultipartFile type to encapsulate the file upload domain.
(3) The uploaded file can be accessed through the MultipartFile attribute, and the file can be written to any directory (or database)
▲ Hope to see the file upload echo
能看到上传后文件的图片，
（1）需要将服务器保存文件的所使用的文件名传回给视图页面。
（2）还需要将保存文件的路径设置为Spring Boot的静态资源路径。
添加额外的静态资源路径时，额外添加的磁盘最后必须要有一个斜杠结尾
File Upload: Code Demo:
The page where you want to upload files looks better, and you need such a file upload control. Add this file upload interface component.
Problem: Why is the file selected here, but the file name is not displayed?
Solution:
Because the js file is executed from top to bottom.
Effect:
After selecting the file, the file name is successfully displayed. The reason why it is successful is that after the entire page is loaded, the custom-file-input component is initialized through bsCustomFileInput.init();. Let it successfully display the file name.
Introduction to method parameters:
If there are too many request parameters, it is impossible to write them one by one, so just encapsulate the request parameters into an object.
Complete code
Page to add files:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<!-- 引入css样式，用 link 元素 , stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
<!-- 引入 Bootstrap 的 Web Jar 中的 CSS 样式 -->
<link rel="stylesheet" th:href="@{'/webjars/bootstrap/css/bootstrap.min.css'}">
<!-- jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery -->
<!-- 引入 jQuery 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/jquery/jquery.min.js'}"></script>
<!-- 引入 Bootstrap 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/bootstrap/js/bootstrap.bundle.min.js'}"></script>
<!-- 引入 popper 的 Web Jar 中的 Js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/popper.js/umd/popper.min.js'}"></script>
<!-- 引入文件上传的界面组件的js -->
<script type="text/javascript"
th:src="@{'/webjars/bs-custom-file-input/dist/bs-custom-file-input.js'}"></script>
<script>
// <!-- 当整个页面加载完成的时候，就执行这个函数，保证这个函数是在页面加载完成后才执行初始化 -->
// <!-- 初始化 custom file input 组件的 JS 脚本 -->
$(function () {
bsCustomFileInput.init();
})
</script>
</head>
<body>
<div class="container">
<h4>添加图书</h4>
<!-- 保证请求是以 multipart/form-data 格式提交请求
不用这个格式，文件上传的数据都不会传到服务器 -->
<form method="post" th:action="@{/addBookFile}" enctype="multipart/form-data">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">图书名：</label>
<div class="col-sm-7">
<input type="text" id="name" name="name"
class="form-control" placeholder="请输入图书名">
</div>
<div class="col-sm-3 text-danger">
<span th:if="${book != null}" th:errors="${book.name}">错误提示</span>
</div>
</div>
<div class="form-group row">
<label for="cover" class="col-sm-2 col-form-label">图书封面：</label>
<div class="col-sm-7">
<!-- custom-file 用来保证页面比较好看 -->
<div class="custom-file">
<input type="file" id="cover" name="cover"
class="custom-file-input">
<label class="custom-file-label" for="cover">选择文件</label>
</div>
</div>
<div class="col-sm-3 text-danger">
<span th:if="${book != null}" th:errors="${book.cover}">错误提示</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary">添加</button>
</div>
<div class="col-sm-6">
<button type="reset" class="btn btn-danger">重设</button>
</div>
</div>
</form>
</div>
</body>
</html>
Configuration file:
Set the directory for uploading files
Create a Book object to encapsulate the file data sent from the front end.
Backend business logic code:
package cn.ljh.file_upload.controller;
import cn.ljh.file_upload.domain.Book;
import lombok.SneakyThrows;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.UUID;
@Controller
public class FileUpLoadController {
//指定文件上传的存储路径，把路径写在配置文件中，通过 @Value 注解来获取该属性值
@Value("${ljh.myfile.savePath}")
private String destPath;
@SneakyThrows
@PostMapping("/addBookFile")
public String addBookFile(Book book, Model model){
//处理文件上传逻辑：也就是把文件内容保存到服务器的指定路径下。
//创建文件
File file = new File(destPath);
//判断文件是否存在
if (!file.exists()){
//如果没有该文件，也就是该目录不存在，则创建该目录
file.mkdir();
}
/*
* destFile 是服务器端重新生成的一个文件名，而且保留了原来的拓展名。
* 比如 我们上传文件的拓展名是 .jpg , 服务器生成的这个 destFile 文件，
* 不仅要有上传的文件的内容，拓展名（后缀名）也要保持一致
* Extension: 扩展 Original：起初的、原先的
*/
//获取上传文件的原拓展名
//获取上传文件的文件名
String originalFilename = book.getCover().getOriginalFilename();
//通过String工具类来获取这个文件名的扩展名
String ext = StringUtils.getFilenameExtension(originalFilename);
/*
* destPath + "/" : 指定文件上传的路径 ，路径和文件名之间需要加一个斜杠 /
* UUID.randomUUID().toString() : 生成文件名
* "." + ext : 文件的扩展名（后缀名）
*/
//生成一个新的文件
File destFile = new File(destPath + "/" + UUID.randomUUID().toString() + "." + ext);
//获取要上传文件的内容，返回是MultipartFile对象
MultipartFile cover = book.getCover();
//MultipartFile对象有一个方法 transferTo ：可以将上传文件的内容写入到指定的文件destFile中。
cover.transferTo(destFile);
model.addAttribute("tip" , originalFilename + "文件上传成功！");
return "uploadfile_success";
}
}
The return page after simply uploading the file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>上传成功</title>
<!-- 引入css样式，用 link 元素 , stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
<!-- 引入 Bootstrap 的 Web Jar 中的 CSS 样式 -->
<link rel="stylesheet" th:href="@{'/webjars/bootstrap/css/bootstrap.min.css'}">
<!-- jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery -->
<!-- 引入 jQuery 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/jquery/jquery.min.js'}"></script>
<!-- 引入 Bootstrap 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/bootstrap/js/bootstrap.bundle.min.js'}"></script>
<!-- 引入 popper 的 Web Jar 中的 Js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/popper.js/umd/popper.min.js'}"></script>
</head>
<body>
<div class="container">
<h4>文件上传成功</h4>
<div class="text-primary" th:text="${tip}">提示</div>
</div>
</body>
</html>
Effect:
File echo
▲ Hope to see the file upload echo
能看到上传后文件的图片，
（1）需要将服务器保存文件的所使用的文件名传回给视图页面。
（2）还需要将保存文件的路径设置为Spring Boot的静态资源路径。
添加额外的静态资源路径时，额外添加的磁盘最后必须要有一个斜杠结尾
Code demo:
Unable to successfully echo the image, pending further research.
Add a fileName attribute to the object that encapsulates the parameters to return the file name after uploading.
Separate the file name and set it into the book object
Make a configuration class to add additional static resource paths and map the disk path of the image to the static resource path so that the project can read it for echo.
On the page after the file is uploaded, the code echoed only has this sentence.
The configured disk path needs to add a slash at the end
Result:
Didn't work out.
All code:
Finally, the echo code is added (the echo is not successful, pending further research)
index
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<!-- 引入css样式，用 link 元素 , stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
<!-- 引入 Bootstrap 的 Web Jar 中的 CSS 样式 -->
<link rel="stylesheet" th:href="@{'/webjars/bootstrap/css/bootstrap.min.css'}">
<!-- jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery -->
<!-- 引入 jQuery 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/jquery/jquery.min.js'}"></script>
<!-- 引入 Bootstrap 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/bootstrap/js/bootstrap.bundle.min.js'}"></script>
<!-- 引入 popper 的 Web Jar 中的 Js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/popper.js/umd/popper.min.js'}"></script>
<!-- 引入文件上传的界面组件的js -->
<script type="text/javascript"
th:src="@{'/webjars/bs-custom-file-input/dist/bs-custom-file-input.js'}"></script>
<script>
// <!-- 当整个页面加载完成的时候，就执行这个函数，保证这个函数是在页面加载完成后才执行初始化 -->
// <!-- 初始化 custom file input 组件的 JS 脚本 -->
$(function () {
bsCustomFileInput.init();
})
</script>
</head>
<body>
<div class="container">
<h4>添加图书</h4>
<!-- 保证请求是以 multipart/form-data 格式提交请求
不用这个格式，文件上传的数据都不会传到服务器 -->
<form method="post" th:action="@{/addBookFile}" enctype="multipart/form-data">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">图书名：</label>
<div class="col-sm-7">
<input type="text" id="name" name="name"
class="form-control" placeholder="请输入图书名">
</div>
<div class="col-sm-3 text-danger">
<span th:if="${book != null}" th:errors="${book.name}">错误提示</span>
</div>
</div>
<div class="form-group row">
<label for="cover" class="col-sm-2 col-form-label">图书封面：</label>
<div class="col-sm-7">
<!-- custom-file 用来保证页面比较好看 -->
<div class="custom-file">
<input type="file" id="cover" name="cover"
class="custom-file-input">
<label class="custom-file-label" for="cover">选择文件</label>
</div>
</div>
<div class="col-sm-3 text-danger">
<span th:if="${book != null}" th:errors="${book.cover}">错误提示</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary">添加</button>
</div>
<div class="col-sm-6">
<button type="reset" class="btn btn-danger">重设</button>
</div>
</div>
</form>
</div>
</body>
</html>
uploadfile_success.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>上传成功</title>
<!-- 引入css样式，用 link 元素 , stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
<!-- 引入 Bootstrap 的 Web Jar 中的 CSS 样式 -->
<link rel="stylesheet" th:href="@{'/webjars/bootstrap/css/bootstrap.min.css'}">
<!-- jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery -->
<!-- 引入 jQuery 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/jquery/jquery.min.js'}"></script>
<!-- 引入 Bootstrap 的 Web Jar 中的 js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/bootstrap/js/bootstrap.bundle.min.js'}"></script>
<!-- 引入 popper 的 Web Jar 中的 Js 脚本 -->
<script type="text/javascript" th:src="@{'/webjars/popper.js/umd/popper.min.js'}"></script>
</head>
<body>
<div class="container">
<h4>文件上传成功</h4>
<div class="text-primary" th:text="${tip}">提示</div>
<!-- 文件上传后进行回显 -->
<img th:src="@{'/uploads/' + ${book.fileName}}">
</div>
</body>
</html>
Book
package cn.ljh.file_upload.domain;
import lombok.Data;
import org.springframework.web.multipart.MultipartFile;
@Data
public class Book {
private Integer id;
private String name;
//用来封装前端传来的文件数据
private MultipartFile cover;
//用于封装上传之后的文件名
private String fileName;
}
FileUpLoadController
package cn.ljh.file_upload.controller;
import cn.ljh.file_upload.domain.Book;
import lombok.SneakyThrows;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.UUID;
@Controller
public class FileUpLoadController {
//指定文件上传的存储路径，把路径写在配置文件中，通过 @Value 注解来获取该属性值
@Value("${ljh.myfile.savePath}")
private String destPath;
@SneakyThrows
@PostMapping("/addBookFile")
public String addBookFile(Book book, Model model){
//处理文件上传逻辑：也就是把文件内容保存到服务器的指定路径下。
//创建文件
File file = new File(destPath);
//判断文件是否存在
if (!file.exists()){
//如果没有该文件，也就是该目录不存在，则创建该目录
file.mkdir();
}
/*
* destFile 是服务器端重新生成的一个文件名，而且保留了原来的拓展名。
* 比如 我们上传文件的拓展名是 .jpg , 服务器生成的这个 destFile 文件，
* 不仅要有上传的文件的内容，拓展名（后缀名）也要保持一致
* Extension: 扩展 Original：起初的、原先的
*/
//获取上传文件的原拓展名
//获取上传文件的文件名
String originalFilename = book.getCover().getOriginalFilename();
//通过String工具类来获取这个文件名的扩展名
String ext = StringUtils.getFilenameExtension(originalFilename);
/*
* destPath + "/" : 指定文件上传的路径 ，路径和文件名之间需要加一个斜杠 /
* UUID.randomUUID().toString() : 生成文件名
* "." + ext : 文件的扩展名（后缀名）
*/
//生成一个新的文件
//生成文件名
String fileName = UUID.randomUUID().toString() + "." + ext;
File destFile = new File(destPath + "/" + fileName);
//获取要上传文件的内容，返回是MultipartFile对象
MultipartFile cover = book.getCover();
//MultipartFile对象有一个方法 transferTo ：可以将上传文件的内容写入到指定的文件destFile中。
cover.transferTo(destFile);
//文件上传成功后回显的名字
book.setFileName(fileName);
model.addAttribute("tip" , originalFilename + "文件上传成功！");
return "uploadfile_success";
}
}
FileUpLoadConfig
package cn.ljh.file_upload.config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
//用于文件上传成功后的回显的处理类
@Configuration
public class FileUpLoadConfig implements WebMvcConfigurer {
//指定文件上传的存储路径，把路径写在配置文件中，通过 @Value 注解来获取该属性值
@Value("${ljh.myfile.savePath}")
private String destPath;
//重写这个方法，用于添加额外的静态资源路径
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//将文件上传的destPath这个磁盘路径添加成静态资源路径，并映射到 /uploads/** 路径下。
registry.addResourceHandler("/uploads/**")
.addResourceLocations(destPath);
}
}
application.yml
#指定文件上传后保存的路径
ljh:
myfile:
savePath: F:\myCode\crazyCode\SpringBoot\springboot07\uploads\