element-plus el-upload 判断图片长度、大小和类型

 <el-form-item label="安装页图标" prop="installIcon">
            <el-upload :http-request="requestUpload" limit="1" :before-upload="fileBeforeUpload512" accept="image/png"
              list-type="picture" ref="uploadRef" class="upload-demo" :action="imageUploadUrl">
              <template #trigger>
                <el-button icon="UploadFilled">上传</el-button>
              </template>
              <template #tip>
                <div class="el-upload__tip">
                  512x512尺寸，png格式，大小不超过1MB
                </div>
              </template>
            </el-upload>
          </el-form-item>

<el-form-item label="浏览器网站图标" prop="siteIcon">
            <el-upload :before-upload="fileBeforeUpload192_siteIcon" accept="image/png,image/jpeg" list-type="picture"
              v-model="form.installIcon" ref="uploadRef" class="upload-demo" :action="imageUploadUrl"
              :http-request="requestUpload" limit="1">
              <template #trigger>
                <el-button icon="UploadFilled">上传</el-button>
              </template>
              <template #tip>
                <div class="el-upload__tip">
                  192x192尺寸，jpg、png格式，大小不超过1MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
/**
 * 上传文件



之前的钩子，参数为上传的文件
 */
function fileBeforeUpload512(file) {
  console.log(file)
  return checkImageWidthAndHeight(file, 512, 512, 1024, 'installIcon')
}


/** 覆盖默认上传行为 */
function requestUpload(options) { }



/**
 * 检查图片大小
 * @param {*} file 
 * @param {*} width 
 * @param {*} height 
 * @param {*} size   单位kb
 */
function checkImageWidthAndHeight(file, width, height, size, formName) {
  // file为 Blob 
  console.log(form.value)
  return new Promise((resolve, reject) => {
    const moreThanSize = file.size / 1024 > size; // 限制文件大小不超过 size kb
    if (moreThanSize) {
      let checkSize = size / 1024
      let text = checkSize + 'MB'
      if (Math.floor(checkSize) === 0) { //kb
        text = size + 'KB'
      }
      proxy.$modal.msgError('文件大小不能超过' + text);
      // ElNotification({
      //   title: 'Error',
      //   message: '文件大小不能超过' + text,
      //   type: 'error',
      // })
      reject(false);
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        console.log(img)
        if (img.width === width && img.height === height) {
          let formData = new FormData();
          formData.append("avatarfile", file, file.name);
          uploadAvatar(formData).then(response => {
            form.value[formName] = response.imgUrl;
          });
          // 尺寸正确，允许上传  
          resolve(true);
        } else {
          // 尺寸不正确，拒绝上传并显示错误  
          console.error('仅支持', width, 'x', height, '像素的PNG图片');
          proxy.$modal.msgError('图片尺寸不符');

          // ElNotification({
          //   title: 'Error',
          //   message: '图片尺寸不符',
          //   type: 'error',
          // })
          reject(false);
        }
      };
      img.onerror = (error) => {
        proxy.$modal.msgError('图片加载失败');

        // ElNotification({
        //   title: 'Error',
        //   message: '图片加载失败',
        //   type: 'error',
        // })
        console.error('图片加载失败');
        reject(false);
      };
      img.src = e.target.result;
    };
    //base64
    reader.readAsDataURL(file);
  });
}