vue element-ui upload组件 上传图片按照固定尺寸任意剪裁

vue element-ui upload组件结合VueCropper 上传图片按照固定尺寸任意剪裁

示例代码

安装VueCropper

npm install vue-croppe

在main.js全局引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

上传组件 （上传剪裁后显示图片以及删除操作）

<el-form-item style="width: 60%" size="medium" label="封面图片：" prop="imageList">
      <div style="display:flex;">
       <vue-hover-mask @click="handleClick(item)" v-for="(item,index) in picsList" :key="index" style="margin-left:10px;">
        <!-- 默认插槽 -->
        <el-image style=" width: 148px; height: 148px" :src="item.url" fit="contain">
        </el-image>
        <!-- action插槽 -->
        <template v-slot:action>
         <i class="el-icon-delete">删除</i>
        </template>
       </vue-hover-mask>
       <el-upload accept="image/jpg,image/jpeg,image/png" class="cover-uploader" list-type="picture-card" :multiple="true" :file-list="imageList" action :auto-upload="false" :on-change='changeUpload' :show-file-list="false" style="margin-left:10px;">
        <i class="el-icon-plus">