vue-cropper 上传裁剪图片 配合element-ui

在main.js 

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

创建cropper.vue 组件

//组件调用

    :autoCropHeight="option.autoCropHeight" @uploadSucc="uploadSucc">

export default{

   data(){

    return{

       option:{//图片裁剪的信息
          url:'',
          autoCropWidth:80,
          autoCropHeight:80,
        },

       dialog:false,//是否显示裁剪组件
        uploadType:1,//上传是图片类型 1 LOGO  2店铺背景图 3营业执照

    } 

  }

}
getFile1(file, fileList) {//上传LOGO
        var self = this
        const isLt2M = file.size / 1024 / 1024 < 0.5;
        if (!isLt2M) {
          self.$message.error('上传头像图片大小不能超过 2MB!');
          return
        }
        self.option.img = URL.createObjectURL(file.raw);
        self.option.autoCropWidth = 80
        self.option.autoCropHeight = 80
        self.uploadType = 1
        this.dialog = true;
      },

//子组件调用的父组件方法

uploadSucc(data){//上传成功的显示图片
        console.log(data)
        if(this.uploadType==1){
          this.logo = data
        }else if(this.uploadType==2){
          this.storeBg = data
        }else if(this.uploadType==3){
          this.businessLicense = data
        }

        this.dialog = false
      },