vue-图片上传压缩

html

   <van-uploader style="height: 90%;width: 100%;margin: 0 auto;" preview-size="100%" v-model="hrpageform" :preview-image="true" :before-read="beforeAvatarUpload" accept="image/*" :before-delete="delhspage" :after-read="afterRead" max-count="1">
        <img class="uploadimg" v-if="hrpageform.length==0" src="../../assets/images/报名第一步/幼儿户口页.png" />
      </van-uploader>

data

 imgBase64: "",
      imgQuality: 0.32,
      imageUrl: "",

js

  beforeAvatarUpload(file) {
      const _this = this;
      return new Promise(resolve => {
        const reader = new FileReader();
        const image = new Image();
        image.onload = imageEvent => {
          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          if (image.width > image.height) {
            _this.imgQuality = 800 / image.width;
            _this.imgQuality = changeTwoDecimal(_this.imgQuality);
          } else {
            _this.imgQuality = 800 / image.height;
            _this.imgQuality = changeTwoDecimal(_this.imgQuality);
          }
          const width = image.width * _this.imgQuality;
          const height = image.height * _this.imgQuality;
          canvas.width = width;
          canvas.height = height;
          // if (canvas.width > 1000) {
          //   canvas.width = width * 0.5;
          //   canvas.height = height * 0.5;
          // }
          context.clearRect(0, 0, width, height);
          context.drawImage(image, 0, 0, width, height);
          const dataUrl = canvas.toDataURL(file.type);
          const blobData = _this.dataURItoBlob(dataUrl, file.type);
          resolve(blobData);
          _this.bease = blobData;
        };
        reader.onload = e => {
          image.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    },