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

在main.js 

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

创建cropper.vue 组件

<template>
  <div class="cropperWrap">
    <!-- 剪切图片的弹框-->
        <el-dialog title="图片裁剪" :visible.sync="visible" @close="$emit('update:show', false)" :show="show" :close-on-click-modal="false">
          <div class="vue-cropper-box">
            <div class="vue-cropper-content" v-if="option">
                <vueCropper
                  ref="cropper"
                  :img="imgUrl"
                  :outputSize="option.size"
                  :outputType="option.outputType"
                  :info="option.info"
                  :full="option.full"
                  :canMove="option.canMove"
                  :canMoveBox="option.canMoveBox"
                  :original="option.original"
                  :autoCrop="option.autoCrop"
                  :autoCropWidth="autoCropWidth"
                  :autoCropHeight="autoCropHeight"
                  :fixedBox="option.fixedBox"
                  @realTime="realTime"
                  @imgLoad="imgLoad"
            ></vueCropper>
            </div>
            <div class="operate-wrap">
              <div class="lf">
                <el-button type="primary" plain @click="turnLeft">左旋转</el-button>
                <el-button type="primary" plain @click="turnRight">右旋转</el-button>
                <el-button type="primary" plain @click="changeScale(1)">放大</el-button>
                <el-button type="primary" plain @click="changeScale(-1)">缩小</el-button>
                <el-button type="primary" @click="onCubeImg">确认</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  export default{
    props:{
      // option:{
      //   type:Object,
      //   default:null
      // },
      show: {
          type: Boolean,
          default: false
      },
      imgUrl:{
        type:String,
        default:''
      },
      autoCropWidth:{
        type:Number,
        default:80
      },
      autoCropHeight:{
        type:Number,
        default:80
      }
    },
    watch:{
      show () {
         this.visible = this.show;
      },
      option (cur,old) {
        console.log(cur)
      }
    },
    data(){
      return{
        visible: this.show,
        option: {
            //img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 1, // 剪切后的图片质量（0.1-1）
            full: true, // 输出原图比例截图 props名full
            outputType: 'png', // 裁剪生成额图片的格式
            canMove: true,  // 能否拖动图片
            original: false,  // 上传图片是否显示原始宽高
            canMoveBox: true,  // 能否拖动截图框
            autoCrop: true, // 是否默认生成截图框
            // autoCropWidth: 150,
            // autoCropHeight: 150,
            fixedBox: false // 截图框固定大小
        },
      }
    },
    methods:{
      //然后我加了几个剪切的按钮进行旋转或放大，并把上传方法一并粘贴到如下：

      turnLeft() {
        this.$refs.cropper.rotateLeft();
      },
      turnRight() {
        this.$refs.cropper.rotateRight();
      },
      cancleCropper() {//取消截图
        this.isShowCropper = false;
      },
      changeScale(num){
          num = num || 1;
          this.$refs.cropper.changeScale(num);
      },
      imgLoad (msg) {
          console.log('imgLoad')
          console.log(msg)
      },
       // 实时预览函数
      realTime(data) {
          console.log('realTime')
          this.previews = data
      },
      onCubeImg() {//剪切上传
        var self = this
        // 获取cropper的截图的base64 数据
        this.$refs.cropper.getCropData(data => {
          // this.fileinfo.url = data;

          //先将显示图片地址清空，防止重复显示
          this.option.img = "";
          //将剪裁后base64的图片转化为file格式
          let file = this.convertBase64UrlToBlob(data);
          //console.log(data)
          //this.$emit('uploadSucc',data);
          //this.show = false
          self.$api.get('/test/login/upload-image',{
            base64:data
          })
          .then((res)=>{
            console.log(res)
          })
        });
      },
      // 将base64的图片转换为file文件
      convertBase64UrlToBlob(urlData) {
        let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], { type: "image/jpeg" });
      },
    }
  }
</script>

<style>

  .cropperWrap .cropper-box,.vue-cropper-box,.vue-cropper-content{
    height: 400px;
  }
  .cropperWrap  .el-dialog__body{
    height: 550px;
  }
  .cropperWrap .operate-wrap{
    margin-top: 20px;
  }
</style>

//组件调用

<Cropper :show.sync="dialog" :imgUrl="option.img" :autoCropWidth="option.autoCropWidth"
    :autoCropHeight="option.autoCropHeight" @uploadSucc="uploadSucc"></Cropper>

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
      },