SpringBoot+Thymeleaf上传头像并回显【表单提交】

参考文章：springboot+thymeleaf实现图片上传并回显https://www.wanmait.com/note/shaowei/javaee/b3717a24fde24d3e89c47765a1a63214.html

一、新建SpringBoot项目

添加 spring web和 thymeleaf 的依赖

二、在templates新建页面

在页面中添加一个表单和一个文件上传控件、一个按钮用于提交表单

一个img标签用于图片回显

<div class="head">
    
    <div th:if="${#session.getAttribute('loginUser').headerImage==null}">
        <span><img th:src="@{/images/header.png}" width="90" height="90"/>span>
    div>
    <div th:unless="${#session.getAttribute('loginUser').headerImage==null}">
        <span><img th:src="@{|/image/${#session.getAttribute('loginUser').headerImage}|}"width="90" height="90"/>span>
    div>
    <form action="/web/loan/page/uploadHeader" method="post" enctype="multipart/form-data">
        <input type="file" value="选择头像" accept="image/*">
        <input type="submit" value="上传头像">
    form>
div>

三、新建控制器

页面提交表单后上传图片并返回到此页面

    //获取本地文件 更新头像
    @PostMapping("/loan/page/uploadHeader")
    public String uploadHeader(MultipartFile file, HttpServletRequest request, Model model) throws IOException {
        //1.获取上传文件名字
        String fileName = file.getOriginalFilename();
        //2.通过上传文件名字截图后缀名
        String fileNameLast = fileName.substring(fileName.indexOf("."));
        //3.定义新的文件名字
        String newFileName = UUID.randomUUID().toString() + fileNameLast;
        //4.获取上传图片路径
        String path = ResourceUtils.getURL("classpath:").getPath() + "static/image/";
        File uploadPath = new File(path + newFileName);
        //5.如果上传目录不存在，创建目录
        if (!uploadPath.exists()) {
            uploadPath.mkdirs();
        }
        //6.上传文件
        file.transferTo(uploadPath);
        //7.更新 用户头像
        User user = (User) request.getSession().getAttribute(Constants.LOGIN_USER);
        user.setHeaderImage(newFileName);
        userService.insertHeaderImage(user);
 
        return "myCenter";
    }

    //更新 用户头像
    @Override
    public void insertHeaderImage(User user) {
        userMapper.updateByPrimaryKeySelective(user);
    }

四、在application.properties配置文件

添加上传文件大小的控制

#单个文件上传的最大值
spring.servlet.multipart.max-file-size=5MB
#上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB

五、运行项目