Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口

场景

前后端分离的项目，前端修改头像时，需要对头像进行裁剪并且能实时预览，然后上传到SpringBoot后台。

实现效果如下

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

插件官网

https://github.com/xyxiao001/vue-cropper

安装插件

npm install vue-cropper

引用插件

组件内使用
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

main.js里面使用
import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

cdn方式使用
<script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
nuxt 使用方式
if(process.browser) {
  vueCropper = require('vue-cropper')
  Vue.use(vueCropper.default)
}

这里只是在头像上传组件内使用，所以采用

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper,
},

的方式。

使用

把上传图片和裁剪图片和预览都放在一个dialog里面，只有在点击修改头像按钮时才显示此dialog

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            @realTime="realTime"
            v-if="visible"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :md="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :md="2">
          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
        </el-col>
      </el-row>
    </el-dialog>

这个dialog的布局的效果如下

通过:visible.sync="open" 绑定的是否显示的变量为open，需要声明

    data() {
      return {
        // 是否显示弹出层
        open: false,

然后在修改头像按钮的点击事件中

      // 编辑头像
      editCropper() {
        this.open = true;
      },

显示此dialog

然后图片裁剪控件的代码为

          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            @realTime="realTime"
            v-if="visible"
          />

此控件的属性

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 || base64 || blob
裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
裁剪框的大小信息	true	true || false
canScale	图片是否允许滚轮缩放	true	true || false
是否默认生成截图框	false	true || false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	true | false
截图框的宽高比例	[1, 1]	[宽度, 高度]
full	是否输出原图比例的截图	false	true | false
固定截图框大小 不允许改变	false	true | false
canMove	上传图片是否可以移动	true	true | false
截图框能否拖动	true	true | false
original	上传图片按照原始比例渲染	false	true | false
截图框是否被限制在图片里面	false	true | false
high	是否按照设备的dpr 输出等比例图片	true	true | false
true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
maxImgSize	限制图片最大宽度和高度	2000	0-max
图片根据截图框输出比例倍数	1	0-max(建议不要太大不然会卡死的呢)
mode	图片默认渲染方式	contain	contain , cover, 100px, 100% auto

这里设置此插件的一些属性与对象options的属性绑定。

声明对象options并设置一些属性

        options: {
          img: 'https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg', //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },

这里给裁剪的图片设置了一张默认图片，在上传后会重新给该img属性赋值，img就是裁剪图片的地址。

实时预览是通过 @realTime="realTime"

绑定的函数realTime

      // 实时预览
      realTime(data) {
        this.previews = data;
      }

会将参数data赋值给定义的对象preview

previews: {}

然后上面的布局中预览的img是

        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>

给img标签赋值参数的url style赋值img属性就可。可以参照其官方案例

@realTime="realTime"
// Real time preview function
realTime(data) {
  var previews = data;
  var h = 0.5;
  var w = 0.2;

  this.previewStyle1 = {
     previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: h
  };

  this.previewStyle2 = {
     previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: w
  };

  固定为100宽度
  this.previewStyle3 = {
     previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.w
  };

  固定为100高度
  this.previewStyle4 = {
     previews.w + "px",
    height: previews.h + "px",
    overflow: "hidden",
    margin: "0",
    zoom: 100 / preview.h
  };
  this.previews = data;
},


<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>
<p>中等大小</p>
<div :style="previewStyle1"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

<p>迷你大小</p>
<div :style="previewStyle2"> 
  <div :style="previews.div">
    <img :src="previews.url" :style="previews.img">
  </div>
</div>

下方那一排的图片的缩放和旋转都是调用的插件自带的函数

     // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },

此插件的其他内置函数

this.$refs.cropper.startCrop() 开始截图
this.$refs.cropper.stopCrop() 停止截图
this.$refs.cropper.clearCrop() 清除截图
this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
this.$refs.cropper.goAutoCrop 自动生成截图框函数
this.$refs.cropper.rotateRight() 向右边旋转90度
this.$refs.cropper.rotateLeft() 向左边旋转90度
图片加载的回调 imgLoad 返回结果success, error
获取截图信息
this.$refs.cropper.cropW 截图框宽度

this.$refs.cropper.cropH 截图框高度

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

前端上传图片的实现是使用ElementUI的el-upload实现。

        <el-col :lg="2" :md="2">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>

这里要对其进行一些设置

将其action设置为#不让其上传到远程url，然后重写覆盖其http-request

      // 覆盖默认的上传行为
      requestUpload() {
      },

来覆盖其默认的上传行为。

然后重写其上传前的方法进行上传预处理

      // 上传预处理
      beforeUpload(file) {
        if (file.type.indexOf("image/") == -1) {
          this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.options.img = reader.result;
          };
        }
      },

在方法中判断上传文件的类型是否是图片，然后获取图片的url并将其赋值给option的img属性，这样裁剪控件就能获取到上传的图片的url并能显示。

而实时预览也能通过裁剪控件的data的url获取到。

然后就是点击提交按钮裁剪后的照片提交给SpringBoot后台

     // 上传图片
      uploadImg() {
        this.$refs.cropper.getCropBlob(data => {
          let formData = new FormData();
          formData.append("file", data);
          uploadimg(formData).then(response => {
            if (response.code === 200) {
              this.open = false;
              this.options.img = process.env.VUE_APP_BASE_API + response.data;
              console.log(this.options.img)
              this.$emit('changezp', this.options.img)
              this.msgSuccess("修改成功");
            }
            this.visible = false;
          });
        });
      },

通过this.$refs.cropper以及设置的ref="cropper"来获取裁剪控件，然后调用他的内置函数获取blob数据。

然后构建一个FormData对象，并设置其file为裁剪图片的data

然后将此formData采用post请求的方式提交到SpringBoot后台

// 用户头像上传
export function uploadAvatar(data) {
  return request({
    url: '/system/user/profile/avatar',
    method: 'post',
    data: data
  })
}

这里的request是封装的axios请求对象向后台发动post请求并传递data参数。

在SpringBoot后台

    @PostMapping("/upload")
    public AjaxResult uploadProfile(MultipartFile file){
        try {
            String path = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);
            path = path.replaceAll("//","/");
            System.out.println("========path: " + path);
            return AjaxResult.success("success",path);
        }catch (Exception e){
            e.printStackTrace();
            return AjaxResult.error("上传失败");
        }

    }

就能通过MultipartFile file接受到图片文件并上传到服务器返回前端能访问静态资源的路径。

具体实现可以参照下面博客

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108383134