SpringBoot+Vue 实现头像上传功能

效果图

引入图片处理插件

npm install vue-cropper

前端

后台

/**
     * 保存头像
     */
    @Log(title = "用户信息", businessType = BusinessType.UPDATE)
    @PostMapping("/updateAvatar")
    @PreAuthorize("hasAuthority('sys:app:all')")
    @ResponseBody
    public HttpResult updateAvatar(@RequestParam("avatarfile") MultipartFile file)
    {
        String userId = getUserId();
        try
        {
            if (!file.isEmpty())
            {
                SysUser user = service.selectById(Long.parseLong(userId));
                String avatar = FileUploadUtils.upload(ProjectConfig.getAvatarPath(), file);
                user.setAvatar(avatar);
                if (service.update(user) > 0)
                {
                    user.clearSensitiveField();
                    return HttpResult.ok(user);
                }
                return HttpResult.error(10001,"图片上传失败");
            }
            return HttpResult.error(10002,"未找到要上传图片");
        }
        catch (Exception e)
        {
            return HttpResult.error(10003,e.getMessage());
        }
    }