Image limit resolution vue js

Requirement: The system needs to customize the system logo, and it will look very ugly if the resolution is not limited, so submit the picture according to the resolution.

accomplish

Wrapper function:

//限制图片尺寸
const limitFileWH = (E_width: Number, E_height: Number, file: any) => {
  let _this = this;
  let imgWidth = 0;
  let imgHeight = 0;
  const isSize = new Promise(function (resolve, reject) {
    let width = E_width;
    let height = E_height;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function () {
      imgWidth = img.width;
      imgHeight = img.height;
      let valid = img.width == width && img.height == height;
      valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
  }).then(() => {
    if (imgHeight !== E_height && imgWidth !== E_width) {
      hlAlert("请上传jpg、jpeg、png格式的图片,分辨率限制为" + E_width + '*' + E_height);
      return false;
    } else {
      return true;
    }
  }, () => {
    hlAlert("请上传jpg、jpeg、png格式的图片,分辨率限制为" + E_width + '*' + E_height);
    return false;
  });
  return isSize;
}

Call: (Resolution is correct to initiate a request) el-upload is used here, check before submitting

//el-upload上传图片检查
beforeAvatarUpload: async (file) => {
  //调用[限制图片尺寸]函数 这里限制图片为368*104
   let res = await hlLimitFileWH(368, 104, file);
   return res;
 }