Springboot + elementUI实现上传用户头像

最近一直在做一个背单词的小项目练手，准备着加入个新功能，想了很多种办法，本来准备利用sm.ms图床，把用户头像上传到图床然后返回链接把链接存到数据库里，后来想了想，感觉用户的头像存在那不太好，于是还是决定把用户头像存储在项目里的一个文件夹好了。

ElementUI提供了upload的组件 组件 | Element官方文档 对于我这种没啥艺术细胞的人就只能用人家提供的框架拉（不过说实话我觉得element的组件还是都挺好看的捏）我们这里就直接使用这个组件，然后我这里就直接使用自动上传了。

我想实现的功能就是用户头像下面有个按钮，点击会弹出一个窗口，是用来上传用户头像的，所以还需要用到Dialog的组件，下面是我的HTML部分代码

 <el-button plain @click="avatarDialog = true">更换头像</el-button>
 ​
 <el-dialog title="更换头像" 
            :visible.sync="avatarDialog" 
            width="80%">
     <el-upload class="avatar-uploader" 
                action="/api/up/avatar" 
                :show-file-list="false" 
                :on-success="handleAvatarSuccess" 
                :before-upload="beforeAvatarUpload">
         <img v-if="imageUrl" :src="imageUrl" class="avatar">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
         <span slot="footer" class="dialog-footer">
             <el-button @click="avatarDialog = false">取 消</el-button>
             <el-button type="primary" @click="avatarDialog = false">确 定</el-button>
         </span>
 </el-dialog>

然后的话，我用的是Vue

 data: {
         imageUrl: '',
         avatarDialog: false,
 },
 methods: {
     handleAvatarSuccess(res, file) {
         this.imageUrl = URL.createObjectURL(file.raw);
         this.$message.success("上传成功！刷新页面查看！")
     },
     beforeAvatarUpload(file) {
         // 这里我也准备只接受jpg的格式储存所以我就直接用了官方提供的代码
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;
         
         if (!isJPG) {
             this.$message.error('上传头像图片只能是 JPG 格式!');
         }
         if (!isLt2M) {
             this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
     }
 }

前端不必多说叭，都是套的框架，然后后端使用的Springboot

这里用到的是commons -fileupload 和commons-io所以要先导入这两个依赖

 <dependency>
     <groupId>commons-fileupload</groupId>
     <artifactId>commons-fileupload</artifactId>
     <version>1.3.3</version>
 </dependency>
 <dependency>
     <groupId>commons-io</groupId>
     <artifactId>commons-io</artifactId>
     <version>2.4</version>
 </dependency>

用户头像图片的存储地址，为了不4所以我在application.yml添加了一个配置

 avatar-save-path: "/images/resource/UserAvatar/"

然后这里是CommonController

 @Value("${avatar-save-path}")
 private String avatarPath;
 ​
 @Autowired
 UserServiceImpl userService;
 ​
 @PostMapping("/up/avatar")
 public String upImg(MultipartFile file, HttpServletRequest req) throws IOException {
     log.info("Updating the File:" + file.toString());
     // 获取文件的原始名称
     String originalFilename = file.getOriginalFilename();
     // 获取原始文件的后缀，只不过我这里只接受jpg
     String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
     // 产生随机的UUID+文件后缀形成新的文件名（为了让图片没那么容易被覆盖）
     String newName = UUID.randomUUID().toString() + suffix;
 ​
     String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
     // 这里获取了session，因为当时项目访问这个接口不存在没登录的情况
     User user = (User) req.getSession().getAttribute("user");
     // 这里是生成了文件存储的路径
     String basePath = path + avatarPath;
     // 判断文件夹是否存在，不存在的话新建一个
     File dir = new File(basePath);
     if (!dir.exists()) {
         dir.mkdirs();
     }
     // 因为一开始的文件存储在临时目录里，所以这里要转存到新的地方
     file.transferTo(new File(basePath + newName));
     // 将用户的头像地址改为新的地址
     user.setAvatarUrl(avatarPath + newName);
     // 这里是修改了数据库里用户的头像地址
     userService.changeUser(user);
     // 更新Session
     req.getSession().setAttribute("user",user);
     log.info("File: " + newName + " is saved in " + basePath);
     log.info(user.getUsername() + " set avatar to " + basePath);
     // 返回新的头像地址
     return avatarPath + newName;
 }

这是俺第一次写博客，可能会有些不对的地方或者可以优化的地方，希望大佬可以给我提提建议啥的，还有希望这篇文章可以帮助到跟我一样是萌新的小伙伴。