antdesign + vue-cropper 控制封面图片的比例

效果图： 在弹出窗编辑图片，上传成功之后 弹出窗关闭，表单显示上传图片的缩略图

ImageCropper

<template>
  <div>
    <div>
      <div class="thumb-contaier">
        <img
          style=" width: 150px; margin-right: 10px;"
          :src="path"
          v-show="path"
          @click="visible=true"
        />
        <div :src="path" v-show="!path" class="img_com" @click="visible=true">上传封面图片</div>
      </div>
    </div>
    <a-modal
      title="上传图片"
      okText="确定"
      cancelText="取消"
      okType="danger"
      width="850px"
      :visible="visible"
      @ok="finish('blob')"
      @cancel="visible=false"
    >
      <div class="info">
        <div class="info-item mt10">
          <input
            type="file"
            id="uploads"
            :value="imgFile"
            name="file"
            style="position:absolute; clip:rect(0 0 0 0);"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            @change="uploadImg($event, 1)"
          />
          <a-button-group>
            <a-button>
              <label
                class="btn btn-orange"
                for="uploads"
                style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;"
              >选择图片</label>
            </a-button>
            <a-button @click="changeScale(1)">放大</a-button>
            <a-button @click="changeScale(-1)">缩小</a-button>
            <a-button @click="rotateLeft">左旋转</a-button>
            <a-button @click="rotateRight">右旋转</a-button>
          </a-button-group>
          <div class="line">
            <div class="cropper-content">
              <div class="cropper">
                <vue-Cropper
                  ref="cropper"
                  :img="option.img"