Vue使用vue-image-crop-upload实现网页中上传图片之前先剪裁的功能

• 先上vue-image-crop-upload的github地址【含中文文档】
• 建议将这个功能封装成单独的组件
• 使用之前需要安装两个插件：
  npm i babel-polyfill -S
npm i vue-image-crop-upload -S
• 代码：

  
  <div id="image">
      
      <a class="btn" @click="toggleShow">设置头像a>
      
      <my-upload field="img" @crop-success="cropSuccess" v-model="show" :width="400" :height="200" img-format="jpg" :size="size">my-upload>
      <img :src="avatar">
  div>
  

  import 'babel-polyfill'
  import myUpload from 'vue-image-crop-upload'
  export default {
      data() {
        return {
          avatar: "",  //用于存储剪切完图片的base64Data和显示回调图片
          show: false,  //剪切框显示和隐藏的flag
          size:2.1
        }
      },
      //注册组件
      components: {
        "my-upload": myUpload
      },
      methods: {
        //控制剪切框的显示和隐藏
        toggleShow() {
          this.show = !this.show;
        },
        //剪切成功后的回调函数
        cropSuccess(imgDataUrl) {
          //  imgDataUrl其实就是图片的base64data码
          this.avatar = imgDataUrl;
          console.log(imgDataUrl)//这里打印出来的是base64格式的资源
        }
      }
  }
  

  /*css部分*/
   #image{
      padding-top: 200px;
    }
    .btn{background-color: indianred;padding: 7px 12px;color: white;}
  

• 实现效果：
  点击按钮
  
  选择图片后的效果
  
  点击保存后的效果