vue-cropper + ant-design-vue 实现裁剪图片并上传到服务器

需求：

上传的图片要进行裁切或压缩到C端显示的格式与大小

主要应用于PC端的后管 涉及到新增过程 与图片回显（修改）

思路：

1. 点击上传，从本地选择图片文件
2. 选择文件夹后进入模态框（将选择的图片塞入模态框） 模态框作为裁剪图片的容器
3. 进行裁剪
4. 获取裁剪后的结果 并将裁剪后的图片对象返回给父组件
5. 父组件获取到裁剪后的图片文件 进行上传 成功后将图片回显

修改过程：

1. 将后端数据回显到图片框内
2. 点击图片 重复上述1-5步 成功后覆盖掉当前页面图片

开发：

图片上传框组件：

<template>
  <div>
    <a-upload
      name="avatar"
      listType="picture-card"
      class="avatar-uploader"
      :showUploadList="false"
      :beforeUpload="beforeUpload"
      :customRequest="function(){}"
      @change="handleChange"
    >
      <img class="default-img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
      <div v-else>
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">点击上传</div>
      </div>
    </a-upload>

    <!-- modal -->
    <cropper-modal ref="cropperModal" @ok="handleCropperSuccess"></cropper-modal>
  </div>
  
</template>
<script>
import cropperModal from "./cropperModal"
import Utils from "@/utils/util"
export default {
  name:'imgCropper',
  components:{
    cropperModal
  },
  props:{
    //图片格式
    imgFormat:{
      type:Array,
      default:function(){
        return ['image/jpeg']