基于vue-cropper头像裁剪上传组件

安装 vue-cropper

npm install vue-cropper

此外，项目使用了 elementUI 框架，可自行引入。

代码实现

<template>
  <div>
    <div class="cropper-containter cropper-size" :class="customClass" v-if="showContainter">
      <div class="cropper_wrap" v-if="showUpCropper" >
        <vueCropper
          ref="cropper"
          :img="option.img "
          :outputSize="option.size"
          :info="option.info"
          :canScale="option.canScale"
          :centerBox="centerBox"
          :autoCrop="option.autoCrop"
          :autoCropWidth="cropWidth"
          :autoCropHeight="cropHeight"
          :fixedBox="option.fixedBox"
          @real-time="realTime"
        ></vueCropper>
      </div>
      <div v-show="!showUpCropper" class="cropper-tips" >
        <p>选择图片编辑后上传</p>
        <p>支持JPG、PNG格式，需小于5M</p>
      </div>
    </div>
    <div class="cropper_upload">
        <slot name="upload">
            <label class="el-button el-button--small el-button--primary is-plain" for="avatar-upload2">{{uploadText}}</label>
            <input type="file" id="avatar-upload2" :accept="accept" @change="uploadImg($event)" />
        </slot>
    </div>
    <div>
      <el-button
        title="左旋转"
        v-if="showUpCropper"
        plain
        size="mini"
        @click="rotateRight"
        icon="el-icon-refresh-left"
        style="margin-left: 10px;"
      ></el-button>
      <el-button
        title="右旋转"
        v-if="showUpCropper"
        plain
        size="mini"
        @click="rotateLeft"
        icon="el-icon-refresh-right"
      ></el-button>
    </div>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
  name: "cropper",
  props: {
    customClass:{
        type: String,
        default:''
    },
    uploadText:{
      type: String,
        default:'选择图片'
    },
    showContainter:{
      type:Boolean,
      default:true
    }, 
    imgSize: {
      type: Number,
      default: 5
    },
    accept: {
      type: String,
      default: "image/png, image/jpeg, image/gif, image/jpg"
    },
    centerBox:{
      type:Boolean,
      default:true,
    },
    cropWidth: {
      type: Number,
      default: 200
    },
    cropHeight: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      showUpCropper: false,
      option: {
        img: '',
        info: true, //裁剪框的大小信息
        outputSize: 1, //裁剪生成图片的质量
        full: false,
        outputType: 'png',
        canMove: true,
        original: false,
        canScale: true,
        // centerBox:true,
        canMoveBox: true,
        autoCrop: true,
        fixedBox: false
      }
    };
  },
  watch: {
     
  },
  computed: {
      
  },
  methods: {
    setImg(data){
       this.option.img = data;
      this.showUpCropper = true;
        this.$emit("upload")
    },
    // 实时预览函数
    realTime(data) {
      // this.previews = data;
      this.$emit('previewChange')
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    uploadImg(e) {
      //上传图片
      let self=this
      this.option.img = "";
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$message.error("图片类型必须是 gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;
      let maxSize = this.imgSize * 1024 * 1024;
      if (file.size > maxSize) {
        this.$message.error(`不能大于${this.imgSize}M`);
        return;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        data = e.target.result;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        self.setImg(data)
      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blobcs
      reader.readAsArrayBuffer(file);
    }
  },
   components: {
    VueCropper
  },
};
</script>
<style lang="scss" scoped>
.cropper-tips {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    p{
        margin:8px 0;
        line-height: 1;
    }
}
.cropper_upload {
    display: inline-block;
}
.cropper-containter {
  position: relative;
  display: inline-block;
  vertical-align: top;
    max-height: 100%;
    border: 1px solid #e3e3e3;
    text-align: center;
    color: #999;
    background: #f7f7f7;
    overflow: hidden;
}
.cropper_wrap {
  width: 100%;
  height: 100%;
}
.cropper-size{
    width: 250px;
   height: 250px;
}
#avatar-upload2 {
  position: absolute;
  clip: rect(0 0 0 0);
}
</style>