vue-cropper实现图片裁剪功能

实现代码

<template>
  <div class="upload_con">
    <el-dialog :title="title" :visible.sync="isShowUpload" @close="close" width="630px">
      <div style="text-align:left">
        <span style="margin-right:10px">图片上传</span>
        <label class="btn" for="uploads">请选择图片</label>
        <input
          type="file"
          id="uploads"
          style="position:absolute; clip:rect(0 0 0 0);"
          accept="image/png, image/jpeg, image/gif, image/jpg"
          @change="uploadImg($event, 1)"
        >
        <span>{
  {fielName}}</span>
      </div>
      <div class="cut clearfix">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :full="option.full"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          @realTime="realTime"
          @imgLoad="imgLoad"
          :high="option.high"
        ></vue-cropper>
        <div
          class="show-preview"
          :style="{'width': previews.w + &