Springboot+Vue-Cropper实现头像剪切上传效果

使用Vue-Cropper这一组件实现头像上传，供大家参考，具体内容如下

效果展示

先看一下效果吧，如果效果不能满足你的需求，就不必再浪费时间往下看了

点击选择图片之后

然后再点击上传图片就可以上传成功，具体效果和页面布局就是这样

前端代码

使用先建议详细阅读vue-cropper官方文档，里面介绍的很详细，可以根据自己的需求进行修改：链接

补充一点：整个项目中使用了elelment-ui组件库，使用前先导入element-ui

关于解释我会在代码中添加注释，毕竟知其然要知其所以然，学习还是得有溯源精神

后端代码

这里先讲述后端的处理逻辑：

1、获取到头像后，会将图片保存在云服务器上，这里我们设定的自己的静态文件目录在D盘，见static_root。
2、然后将图片在云服务器上的url保存在后端mysql数据库中。
3、返回给前端上传成功的消息，携带图片的url这样就可以通过url访问到这张图片，从而在前端进行显示。

Controller层

@ResponseBody
@PostMapping("/updateavatar")
    public Result updateAvatar(@RequestParam("username") String username,@RequestParam("file") MultipartFile file) throws IOException {
        return userService.uploadAvatar(username,file);
    }

Service层直接上impl实现

 //这是导的工具包，需要在pom.xml安装依赖
 import cn.hutool.core.io.FileUtil;
    //一些端口信息
    @Value("${server.port}")
    private String port;

    private static final String ip = "http://localhost";

    private static final String static_root = "D:/devplatform_files";


    @Override
    public Result uploadAvatar(String username, MultipartFile file) throws IOException {
        //获取原文件的名称
        String originalFilename = file.getOriginalFilename();
//      String rootFilePath = System.getProperty("user.dir")+"/src/main/resources/files/"+originalFilename;
        //获取到文件路径
        String rootFilePath = static_root +"/avatar/"+ originalFilename;
        //保存在文件中
        FileUtil.writeBytes(file.getBytes(),rootFilePath);
        //图片访问用到的url
        String avatar = ip+":"+port+"/avatar/"+originalFilename;
        try{
            //头像信息存入数据库
            userMapper.updateAvatar(avatar,username);
            //自己封装的Result结果返回类
            return Result.success(200,"上传成功",avatar);
        }catch (Exception e){
            System.out.println(e);
            return Result.fail("上传失败");
        }
    }

mapper持久层

@Mapper
@Repository
public interface UserMapper{
    String getAvatarByUsername(String username);
}

mapper.xml文件

    
        update user set avatar = #{avatar} where username = #{username}
    

关于Result结果类的封装

public class Result {
    private int code;   //200是正常   非200表示异常
    private String msg;
    private Object data;
    public static Result success(Object data){
        return success(200,"操作成功",data);
    }
    public static Result success(String msg){
        return success(200,msg,null);
    }
    public static Result success(int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setData(data);
        r.setMsg(msg);
        return r;
    }
    public static Result fail(String msg){
        return fail(400, msg, null);
    }
    public static Result fail(String msg, Object data){
        return fail(400, msg, data);
    }
    public static Result fail(int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setData(data);
        r.setMsg(msg);
        return r;
    }
    public int getCode() {return code;}
    public void setCode(int code) {this.code = code;}
    public String getMsg() {return msg;}
    public void setMsg(String msg) {this.msg = msg;}
    public Object getData() {return data;}
    public void setData(Object data) {this.data = data;}
}

当图片保存在云服务器上后，就可以通过url直接访问到图片了，这里我本地展示这一效果,实现了这一效果，前端才能够在img标签中访问到图片。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。