Vue-cli+Element+vue-cropper裁剪头像

• 将element上传文件的auto-upload改为false
• 加入vue-cropper显示上传的文件，通过点击确定上传按钮，将裁剪的图片上传
• changeUpload控制传入的图片格式及大小，满足条件时，利用URL.createObjectURL(file.raw)创建一个新的 URL
• this.$refs.cropper.getCropBlob获取截图的blob数据
• 向FormData对象附加File或Blob类型的文件,使用append()方法时，可以通过第三个可选参数设置发送请求的头指定文件名。frm.append('file',data,this.filename)
• 使用$refs.cropper.changeScale(1)等方法旋转缩放图片

<template>
  <el-dialog title="添加讲师" :visible="dialogFormVisible=true" >
    <div class="flex j-s">
      <el-upload
        class="avatar-uploader"
        drag
        action
        :show-file-list="false"
        :auto-upload="false"
        :on-change="changeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        <!-- <img v-if="articalInfo.img" :src="$getAssetsPath(articalInfo.img)" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
      </el-upload>
      <div class="cropper-content" style="flex:1">
        <div
          class="show-preview"
          :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}"
        >
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </div>
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            @realTime="realTime"
          ></vueCropper>
          <div>
            <button @click="$refs.cropper.changeScale(1)">+</button>
            <button @click="$refs.cropper.changeScale(-1)">-</button>
            <button @click="$refs.cropper.rotateRight()">></button>
            <button @click="$refs.cropper.rotateLeft()"><</button>
            <button @click="finish">上传</button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
    components: {
    VueCropper
  },
  data() {
    return {
        previews: {},
        option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
       filename:''
    };
  },
  methods: {
    handleClose(done) {
      this.articalInfo = {
        img: "",
        id: 0,
        name: "",
        nickname: "",
        desc: "",
        fangxiang: ""
      };
      done();
    },
    changeUpload(file, fileList) {
      this.filename=file.name
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isIMG = [".jpeg", ".jpg", ".png"].some(r => file.name.endsWith(r));
      if (!isIMG) {
        this.$me("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$me("上传文件大小不能超过 2MB!");
        return false;
      }

      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw);
      });
    },
    realTime(data) {
      // var previews = data;
      var h = 0.5;
      var w = 0.2;

      this.previews = data;
    },
    finish() {
      this.$refs.cropper.getCropBlob(async(data) => {
        let frm = new FormData()
        frm.append('file',data,this.filename)
       let res = await this.$post(this.COMMON_UPLOAD_URL,frm)
        console.log(res)
      })
    }
  }
};
</script>

<style scoped lang='scss'>
// 截图
.cropper-content {
    .cropper {
        width: auto;
        height: 300px;
    }
}
</style>