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

  • 先上vue-image-crop-upload的github地址【含中文文档】
  • 建议将这个功能封装成单独的组件
  • 使用之前需要安装两个插件:
    npm i babel-polyfill -S
    npm i vue-image-crop-upload -S
  • 代码:
    <!--HTML部分-->
    <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;}
    
  • 实现效果:
    点击按钮
    点击按钮
    选择图片后的效果
    在这里插入图片描述
    点击保存后的效果
    在这里插入图片描述
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页