Vue-cli+Element+vue-cropper Crop the profile picture

• Change the auto-upload of Element’s upload file to false
• Add vue-cropper to display the uploaded file and upload the cropped image by clicking ok upload button
• ChangeUpload controls the format and size of incoming images, which is utilized when conditions are metURL.createObjectURL(file.raw)Create a new URL
• this.$refs.cropper.getCropBlobGet bloB data for the screenshot
• When append() is used to attach a File of type File or Blob to a FormData object, you specify the File name by setting the header to send the request with a third optional parameter.frm.append('file',data,this.filename)
• use$refs.cropper.changeScale(1)And so on

<template>
  <el-dialog title="Add lecturer" :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"> drag the file here, or <em> click upload </em> </div> <div class="el-upload__tip" slot="tip"</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: ""// Clipping the image info:trueOutputType: 0.8, // outputType: 0.8"jpeg"// Crop the generated image to canScale:false// Does the image allow the wheel to zoom the autoCrop:true// autoCropWidth: 300, // autoCropHeight: 200, // fixedBox:false// The size of the screenshot box cannot be changed.true, // Whether to enable fixedNumber: [7, 5], // Full:trueCanMoveBox:false, // Can you drag the screenshot box original:false// Upload the image and render it to the original scale.false// Whether the screenshot box is restricted to the image infoTrue:true // trueTo show the true output picture width and heightfalseDisplay the width and height of the screenshots you see}, filename:' '
    };
  },
  methods: {
    handleClose(done) {
      this.articalInfo = {
        img: "",
        id: 0,
        name: "",
        nickname: "",
        desc: "",
        fangxiang: ""
      };
      done(a); }, 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("Upload profile picture in JPG/PNG format only!");
      }
      if(! isLt2M) { this.$me("Upload file size cannot exceed 2MB!");
        return false; } // After uploading successfully, assign the image address to the clipping box to display the image 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'> // screenshot. Cropper -content {. Cropper {width: auto; height: 300px; } } </style>Copy the code