本文记录一下如何在springboot2.x环境下，使用thymeleaf上传并显示本地图片

之所以写这个小结是因为今天想做一个运维小工具，用到了图片上传，但是使用了thymeleaf之后，图片无法正确显示。

查找资料之后，发现需要指定虚拟目录，具体步骤如下。

springboot2.x下如何进行文件上传

文件上传部分没有什么变化，依旧是springmvc中的套路。

编写文件上传表单

首先引入依赖如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

接着我们需要一个表单，用于选取本地文件。

<form action="insertTip" method="POST" enctype="multipart/form-data">
    ......
    <tr>
        <td>缩略图片</td>
        <td><input type="file" name="tipImage" class="form-control" required="required" /></td>
    </tr>
    ......

    <div class="modal-footer">
        <center>
            <input type="submit" class="btn btn-primary" value="提交" />
            <button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
        </center>
    </div>
</form>

需要注意的是，form表单需要添加属性 enctype=”multipart/form-data” 用于标记这是一次文件上传。

编写文件上传的业务逻辑

java代码中解析参数，并进行文件的上传操作

@RequestMapping(value = "insertTip", method = {RequestMethod.POST})
    public String addTip(@RequestParam("tipImage") MultipartFile tipImage,
                        HttpServletRequest request) {
// 获取文件
String fileName = tipImage.getOriginalFilename();
// 文件后缀
String suffixName = fileName.substring(fileName.lastIndexOf("."));
// 重新生成唯一文件名，用于存储数据库
String newFileName = UUID.randomUUID().toString().replace("-", "") + suffixName;
//创建文件
File file = new File(filePath + newFileName);
String tipImageUrl = file.getAbsolutePath();
log.info("tipId={},新的文件名={},绝对路径={}" , tipId, newFileName, tipImageUrl);
 // 异步线程上传文件
executorService.submit(() -> {
    try {
        tipImage.transferTo(file);
        log.info("tipId={},新的文件名={},上传成功" , tipId, newFileName);
    } catch (
        IOException e) {
        e.printStackTrace();
    }
});

核心业务为，获取了文件的绝对路径，将文件重命名后，通过 transferTo(file) 上传至指定的目录下。

这里，需要将文件名保存至数据库中，注意不要保存绝对路径，否则无法加载。

配置文件上传路径

在application.properties中添加如下配置，配置虚拟目录，以及文件上传的绝对路径，将在下面用到。

file.upload.path=D://fileupload/
file.upload.path.relative=/images/**

配置虚拟目录到物理路径的映射关系

编写一个spring的bean，标注 @Configuration

@Configuration
public class UploadFileConfig extends WebMvcConfigurerAdapter {

    /**上传地址*/
    @Value("${file.upload.path}")
    private String filePath;
    /**显示相对地址*/
    @Value("${file.upload.path.relative}")
    private String fileRelativePath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(fileRelativePath).addResourceLocations("file:/" + filePath);
        super.addResourceHandlers(registry);
    }
}

这里我们重写了WebMvcConfigurerAdapter的addResourceHandlers方法，将配置中的绝对地址与虚拟路径相对应，这样，我们就可以在thymeleaf的html页面中，通过 /images/xxxxx.xxx
的方式，加载文件系统的文件了。