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

193 阅读 0 评论 128 点赞

我是靠谱客的博主整齐海燕，最近开发中收集的这篇文章主要介绍Springboot+Vue-Cropper实现头像剪切上传效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

效果展示

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

点击选择图片之后

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

前端代码

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

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

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

<template>
  <div style="height: 800px;">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
      <el-tab-pane label="个人信息" name="first">
      </el-tab-pane>
      <el-tab-pane label="更换头像" name="second">
        <div class="avatar_header">
          <span>当前头像</span>
        </div>
        <div class="avatar_current">
          <img :src="currentimg">
        </div>
        <div class="avatar_select">
          <!-- 这里这样做是因为
          原来的 <input type="file">标签太丑了，可以自己去尝试一下，看看有多丑
          所以使用button来控制触发input来进行选择文件
          -->
          <input type="file"  ref="uploads" id="uploads" accept="image/png, image/jpeg, image/gif, image/jpg" hidden @change="setImage($event)">
          <el-button type="primary" @click="selectAvatar">选择图片</el-button>

          <el-button type="success" style="margin-left:100px;" @click="uploadImg('blob')">上传图片</el-button>
        </div>

        <div class="cropper_box">
        <div class="avatar_cropper">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :info="option.info"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :full="option.full"
            :fixedBox="option.fixedBox"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :centerBox="option.centerBox"
            :height="option.height"
            :infoTrue="option.infoTrue"
            :maxImgSize="option.maxImgSize"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
            @imgLoad="imgLoad">
          </vue-cropper>
        </div>

        <div class="show_preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
          'margin': '5px'}">
          <div :style="previews.div">
            <img :src="option.img" :style="previews.img">
          </div>
        </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="third">

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import qs from 'qs'
import { VueCropper }  from 'vue-cropper'

export default {
  data() {
    return {
      activeName:'second',
      currentimg:this.$store.getters.getAvatar,    //这里我是将用户信息保存在Vuex进行管理
      previews:{},
      option:{
        img:'',                //裁剪图片的地址,
        outputSize:1,          //裁剪生成的图片质量可选(0,1,-1)
        outputType:'jpeg',     //裁剪生成图片的格式
        info:true,             //图片大小信息
        canScale:true,         //是否允许滚轮缩放
        autoCrop:true,         //是否默认生成截图框
        autoCropWidth:240,
        autoCropHeight:240,    //默认生成截图框大小
        fixed:true,            //是否开启截图框宽高固定比例
        fixedNumber:[1,1],     //截图框的宽高比,
        full:false,            //按原比例裁剪图片，不失真
        fixedBox:true,         //固定截图框大小，不允许改变
        canMove:false,         //上传图片是否可以移动,
        canMoveBox:true,       //截图框是否可以拖动
        original:false,        //上传图片按照原始比例渲染
        centerBox:false,       //截图框是否被限制在图片里面
        height:true,           //是否按照设备的dpr，输出等比例图片
        infoTrue:false,        //true为展示真实输出图片宽高，false展示看到的截图框宽高，
        maxImgSize:3000,       //限制图片最大宽度和高度
        enlarge:1,             //图片根据截图框输出比例倍数
        mode:'400px 300px'     //图片渲染方式 
      }
    }
  },
  methods: {
    // 标签页切换调用方法，不重要！删掉了一些不必要的代码
    handleClick(){
    },

    // 选择图片调用方法
    selectAvatar(){
      this.$refs.uploads.click();
    },
    // 真正的选择图片方法，姑且先这么命名吧
    setImage(e){
      let file = e.target.files[0];
      if (!/.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        // this.$message.info("图片类型不正确");
        console.log("图片类型不正确");
        return false;
      }
      //转化为blob,使用blob是为了在页面中展示上传的那张图片
      let reader = new FileReader();
      // 文件读取成功后触发onload方法
      reader.onload = (e) => {
        let data;
        // 要在页面中展示，转化为url形式
        if(typeof e.target.result === 'object'){
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        }else{
          data = e.target.result
        }
        this.option.img = data
        //转化为base64
      }
      reader.readAsDataURL(file)
    },

    realTime(data){
      this.previews = data;
    },
    //初始化函数 
    imgLoad(msg){
      console.log("工具初始化函数====="+msg);
    },

    // 头像上传调用方法
    uploadImg(type){
      let _this = this;
      if(type === 'blob'){
        //获取截图的blob数据类型
        this.$refs.cropper.getCropBlob(async (data) => {
          let formData = new FormData();
          // 发数据传递到后端,注意这里请根据自己的后端逻辑进行处理，我是将用户名保存在Vuex中，可以直接进行命名
          formData.append("username",this.$store.getters.getUsername);
          formData.append('file',data,this.$store.getters.getUsername+".jpg");
          this.axios.post('/updateavatar',formData).then(function(response){
            console.log(response);
            if(response.data.code == 200){
              console.log(response);
              _this.currentimg = response.data.data;
              _this.$store.commit('setAvatar',response.data.data);   //把新头像重新保存回Vuex
              _this.$router.go(0);                                   //刷新网页            
              }
          })
        })
      }

    }
  },

  components:{VueCropper}
};

</script>

<style scoped>
.tab-create{
  position: absolute;
  right: 80px;
  top: 115px;
  margin-top: 5px;
  z-index: 999;
}

.avatar_header{
  width: 100%;
  height: 50px;
  font-size: 14;
  line-height: 50px;
  font-weight: 550;
  padding-left: 20px;
  text-align: left;
}

.avatar_current{
  width: 100%;
  height: 260px;
  text-align: left;
}
.avatar_current img{
  width: 240px;
  height: 240px;
  margin-left: 20px;

}
.avatar_select{
  text-align: left;
}

.cropper_box{
  text-align: left;
  position: relative;
}
.avatar_cropper{
  margin-top: 40px;
  height: 350px;
  width: 450px;
  display: inline-block;
}

.show_preview{
  display: inline-block;
  position: absolute;
  top:30px;
  left: 500px;
}


</style>

后端代码

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

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文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.devplatform.mapper.UserMapper">
    <update id="updateAvatar">
        update user set avatar = #{avatar} where username = #{username}
    </update>
</mapper>

关于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标签中访问到图片。