Vue+Element-UI realizes uploading and compressing images

<el-form-item label="photo">
  <el-upload
  accept="image/*"
  class="avatar-uploader"
  :action="uploadPath"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgUrl" :src="imgUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
</el-form-item>

data() {
  return {
   //Compression quality   imgQuality: 0.5,
   imageUrl: ''
}
methods: {
 handleAvatarSuccess(res, file) {
  // Server returns result processing },
 dataURItoBlob(dataURI, type) {
  var binary = atob((',')[1]);
  var array = [];
  for(var i = 0; i < ; i++) {
   ((i));
  }
  return new Blob([new Uint8Array(array)], {type: type});
 },
 beforeAvatarUpload(file) {
  const _this = this
  return new Promise(resolve => {
   const reader = new FileReader()
   const image = new Image()
    = (imageEvent) => {
    const canvas = ('canvas');
    const context = ('2d');
    const width =  * _this.imgQuality
    const height =  * _this.imgQuality
     = width;
     = height;
    (0, 0, width, height);
    (image, 0, 0, width, height);
    const dataUrl = ();
    const blobData = _this.dataURItoBlob(dataUrl, );
    resolve(blobData)
   }
    = (e => {  = ; });
   (file);
  })
 }
}