博客项目学习笔记十五：基本设置（头像上传）

博客项目目录： 请戳这里

准备

需求：用户登录后，鼠标悬停在用户部分，点击下拉菜单的基本设置，跳转到对应的页面，点击上传头像，可以上传本地硬盘的图片，并替换掉原来的头像。

1.修改layout.ftl

首先注释掉layout.ftl部分代码，否则点击上传头像会没有反应，因为res/mods/user.js没有加载进来

2.修改set.ftl

将头像部分显示为后台的用户头像

<div class="layui-form layui-form-pane layui-tab-item">
      <div class="layui-form-item">
        <div class="avatar-add">
          <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
          <button type="button" class="layui-btn upload-img">
            <i class="layui-icon">&#xe67c;</i>上传头像
          </button>
          <img src="<@shiro.principal property="avatar" />">
          <span class="loading"></span>
        </div>
     </div>
</div>

3.UserController添加上传头像方法

   //基本设置(头像)
    @ResponseBody
    @PostMapping("/user/upload")
    public Result uploadAvatar(@RequestParam(value = "file") MultipartFile file) throws IOException {

        return uploadUtil.upload(UploadUtil.type_avatar, file);
    }

上传调用了UploadUtil，需要在util包将UploadUtil引进来，UploadUtil类有一个Consts，所以在common/lang下引入 Consts，同时修改yml配置文件

file:
  upload:
    dir: ${user.dir}/upload

4.新增MvcConfig配置类

新增配置类，让路径生效

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    @Autowired
    Consts consts;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/upload/avatar/**")
                .addResourceLocations("file:///" + consts.getUploadDir() + "/avatar/");
    }
}

5.在doset方法添加对应内容

修改doset方法，验证头像，并替换掉原来的头像

//验证并设置头像
        if(StrUtil.isNotBlank(user.getAvatar())) {

            User temp = userService.getById(getProfileId());
            temp.setAvatar(user.getAvatar());
            userService.updateById(temp);

            AccountProfile profile = getProfile();
            profile.setAvatar(user.getAvatar());

            SecurityUtils.getSubject().getSession().setAttribute("profile", profile);

            return Result.success().action("/user/set#avatar");
        }

6.修改user.js

将原来的res.url修改为res.data（因为Result类定义的传输数据为data）

7.测试

启动项目，点击上传头像，发现原头像替换为上传的头像

8.总结

头像上传主要分为两步，第一步将本地的图片转化为url，上传到硬盘（或云里），第二部再取出图片，替换掉原来后台的数据

参考资料：

https://github.com/MarkerHub/eblog