一、背景

• 后台系统一般会有用户个人信息的模块（见下图），为了增强用户的体验度，系统会开放自定义头像的功能，让用户可以上传自定义图片替代默认的系统头像。本文将通过Vue+SpringBoot来具体实现。
  

二、vue-image-crop-upload组件

• 首先我们会用到vue-image-crop-upload组件
  
• 一些重要的参数与事件
  
  

三、编写前端上传头像功能

• 了解了vue-image-crop-upload组件的功能后，编写自定义头像前台上传功能就相当容易了，我们只需要把这个组件嵌入到个人信息页面中，并编写相应事件即可。

<template><div class="app-container">...<div slot="header" class="clearfix"><span>个人信息</span></div><div><div style="text-align: center"><div class="el-upload"><myUploadv-model="showDialog":headers="headers":url="baseApi+'/api/user/updateAvatar'"@crop-upload-success="cropUploadSuccess"/><img:src="user.avatarUrl? baseApi + '/file/' + user.avatarUrl: Avatar"title="点击上传头像"class="avatar"@click="toggleShow">...</div></div></div>..</div>
</template><script>
// 使用头像上传组件
import myUpload from 'vue-image-crop-upload'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import store from '@/store'
import Avatar from '@/assets/images/avatar.png'
export default {name: 'Center',components: { myUpload },data() {return {showDialog: false,Avatar: Avatar,headers: {'Authorization': getToken()},...}},computed: {...mapGetters(['user','baseApi'])},methods: {// 点击头像打开上传窗口toggleShow() {this.showDialog = !this.showDialog},// 上传成功后重新载入信息cropUploadSuccess(jsonData, field) {store.dispatch('getInfo').then(() => { })},...}
}
</script>
...

• 页面效果如下：
  

四、编写后台上传用户头像接口

• 有了前端页面，就需要后台实现对应的接口，想一想，该接口需要有哪些功能呢？

1. 需要将前端组件上传过来的头像文件保存到服务器上；
2. 需要将保存在服务器上的用户头像路径存放到用户信息表中。

4.1 实现前端组件上传过来的头像文件保存到服务器上

• 我们需要建立一个上传文件信息表，及建立上传文件的操作服务类来实现文件的保存。
  

1. 上传文件信息表

/*** 文件信息表** @author zhuhuix* @date 2020-04-20*/
@ApiModel(value = "用户信息")
@Data
@SuperBuilder
@NoArgsConstructor
@AllArgsConstructor
@TableName("upload_file")
public class UploadFile implements Serializable {@TableId(value = "id", type = IdType.AUTO)private Long id;/*** 文件实际名称*/private String realName;/*** 文件名*/private String fileName;/*** 文件主名称*/private String primaryName;/*** 文件扩展名*/private String extension;/*** 存放路径*/private String path;/*** 文件类型*/private String type;/*** 文件大小*/private Long size;/*** 上传人*/private String uploader;private Timestamp createTime;@Overridepublic String toString() {return "UploadFile{" +"fileName='" + fileName + '\'' +", uploader='" + uploader + '\'' +", createTime=" + createTime +'}';}
}

2. 上传文件DAO

/*** 文件上传DAO接口** @author zhuhuix* @date 2021-07-19*/
@Mapper
public interface UploadFileMapper extends BaseMapper<UploadFile> {}

3. 上传文件工具具体实现类

/*** 文件上传接口定义** @author zhuhuix* @date 2020-04-20*/
public interface UploadFileTool {/*** 文件上传** @param uploader  上传人* @param realName  文件实际名称* @param multipartFile 文件* @return 上传信息*/UploadFile upload(String uploader, String realName, MultipartFile multipartFile);
}

/*** 文件上传实现类** @author zhuhuix* @date 2020-04-20*/
@Slf4j
@Service
@RequiredArgsConstructor
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class UploadFileToolImpl implements UploadFileTool {private final UploadFileMapper uploadFileMapper;@Value("${uploadFile.path}")private String path;@Value("${uploadFile.maxSize}")private long maxSize;@Override@Transactional(rollbackFor = Exception.class)public UploadFile upload(String uploader, String realName, MultipartFile multipartFile) {//检查文件大小if (multipartFile.getSize() > maxSize * Constant.MB) {throw new RuntimeException("超出文件上传大小限制" + maxSize + "MB");}//获取上传文件的主文件名与扩展名String primaryName = FileUtil.mainName(multipartFile.getOriginalFilename());String extension = FileUtil.extName(multipartFile.getOriginalFilename());//根据文件扩展名得到文件类型String type = getFileType(extension);//给上传的文件加上时间戳LocalDateTime date = LocalDateTime.now();DateTimeFormatter format = DateTimeFormatter.ofPattern("yyyyMMddhhmmssS");String nowStr = "-" + date.format(format);String fileName = primaryName + nowStr + "." + extension;try {String filePath = path + type + File.separator + fileName;File dest = new File(filePath).getCanonicalFile();if (!dest.getParentFile().exists()) {if (ObjectUtil.isNull(dest.getParentFile().mkdirs())) {throw new RuntimeException("上传文件失败：建立目录错误");}}multipartFile.transferTo(dest);if (ObjectUtil.isNull(dest)) {throw new RuntimeException("上传文件失败");}UploadFile uploadFile = new UploadFile(null, realName, fileName, primaryName,extension, dest.getPath(), type, multipartFile.getSize(),uploader, Timestamp.valueOf(LocalDateTime.now()));if (uploadFileMapper.insert(uploadFile) > 0) {return uploadFile;}throw new RuntimeException("上传文件失败");} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e.getMessage());}}/*** 根据文件扩展名给文件类型** @param extension 文件扩展名* @return 文件类型*/private static String getFileType(String extension) {String document = "txt doc pdf ppt pps xlsx xls docx csv";String music = "mp3 wav wma mpa ram ra aac aif m4a";String video = "avi mpg mpe mpeg asf wmv mov qt rm mp4 flv m4v webm ogv ogg";String image = "bmp dib pcp dif wmf gif jpg tif eps psd cdr iff tga pcd mpt png jpeg";if (image.contains(extension)) {return "image";} else if (document.contains(extension)) {return "document";} else if (music.contains(extension)) {return "music";} else if (video.contains(extension)) {return "video";} else {return "other";}}
}

4.2 将保存在服务器上的用户头像路径存放到用户信息表中

1. 在用户信息服务中增加保存头像信息的功能

/*** 用户信息** @author zhuhuix* @date 2020-04-03*/
public interface SysUserService {..../*** 修改用户头像* @param file 文件* @return json*/Map<String,String>  updateAvatar(MultipartFile file);}

/*** 用户信息实现** @author zhuhuix* @date 2020-04-03*/
@Slf4j
@Service
@RequiredArgsConstructor
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class SysUserServiceImpl implements SysUserService {private final SysUserMapper sysUserMapper;private final UploadFileTool uploadFileTool;@Override@Transactional(rollbackFor = Exception.class)public Map<String, String> updateAvatar(MultipartFile file) {SysUser sysUser = findByUserName(getCurrentLoginUserName());// 调用上传文件服务保存头像UploadFile uploadFile = uploadFileTool.upload(sysUser.getUserName(), file.getOriginalFilename(), file);// 将头像路径保存到个人信息中sysUser.setAvatarUrl(uploadFile.getType() + File.separator  + uploadFile.getFileName());update(sysUser);return new HashMap<String, String>(1) {{put("avatar", uploadFile.getFileName());}};}@Override@Transactional(rollbackFor = Exception.class)public SysUser update(SysUser user) {if (sysUserMapper.updateById(user) > 0) {return user;}throw new RuntimeException("更新用户信息失败");}@Overridepublic SysUser findByUserName(String userName) {return sysUserMapper.selectOne(new QueryWrapper<SysUser>().lambda().eq(SysUser::getUserName, userName));}private String getCurrentLoginUserName() {final Authentication authentication = SecurityContextHolder.getContext().getAuthentication();if (authentication == null) {throw new RuntimeException("登录状态已过期");}if (authentication.getPrincipal() instanceof UserDetails) {UserDetails userDetails = (UserDetails) authentication.getPrincipal();return (userDetails.getUsername());}throw new RuntimeException("找不到当前登录的信息");}}

4.3 编写用户更新头像信息API

• 最后只需要在Controller层增加用户更新头像信息API接口供前端调用即可

@ApiOperation("修改用户头像")@PostMapping(value = "/updateAvatar")public ResponseEntity<Object> updateAvatar(@RequestParam MultipartFile avatar) {return  ResponseEntity.ok(sysUserService.updateAvatar(avatar));}

五、前后端联调

六、源码

• 前端
  https://gitee.com/zhuhuix/startup-frontend
  https://github.com/zhuhuix/startup-frontend
• 后端
  https://gitee.com/zhuhuix/startup-backend
  https://github.com/zhuhuix/startup-backend