el-upload上传图片之前的分辨率等校验

<template>
  <div>
    <div>
      <el-upload
        :class="{ disabled: formInline.image }"
        action="opc/oss/upload"
        list-type="picture-card"
        :data="imgtype"
        :headers="headers"
        :on-success="handleAvatarSuccess"
        :on-change="handleChange"
        :before-upload="beforeAvatarUpload"
        :on-preview="handlePictureCardPreview"
        :file-list="fileList"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <span class="image-text">
        正方形图片格式 最大分辨率不超过256*256，png, jpg格式，大小不超过40K
      </span>
    </div>
    <div v-if="dialogVisible">
      <el-dialog
        title="图片显示"
        :visible.sync="dialogVisible"
        :modal-append-to-body="false"
        @close="colseDialog"
      >
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      dialogVisible: false, //控制图片放大
      dialogImageUrl: '',
      formInline: {},
      fileList: [],
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      imgtype: {
        type: 'idCard',
      },
    }
  },
  methods: {
    // 上传之前
    async beforeAvatarUpload(file) {
      const istype = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt40KB = file.size / 1024 < 40
      const isSize = await new Promise(function (resolve, reject) {
        let width = 256
        let height = 256
        let _URL = window.URL || window.webkitURL
        let image = new Image()

        image.onload = function () {
          const valid =
            image.width <= width &&
            image.height <= height &&
            image.width / image.height == 1
          valid ? resolve() : reject()
        }
        image.src = _URL.createObjectURL(file)
      }).then(
        () => {
          return file
        },
        () => {
          this.$message.error(
            '上传的图片必须是正方形图片格式,最大分辨率不超过256*256'
          )
          return Promise.reject(false)
        }
      )

      if (!istype) {
        this.$message.error('上传图片只能是 JPG 或 PNG格式!')
      }
      if (!isLt40KB) {
        this.$message.error('上传图片大小不能超过 40KB!')
      }

      return isSize && istype && isLt40KB
    },
    // 图片改变 - 限制一张
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    handleRemove(file, fileList) {
      this.formInline.image = ''
    },
    handleAvatarSuccess(res, file) {
      this.formInline.image = res.data.httpUrl
    },
    // 放大镜
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.disabled >>> .el-upload {
  display: none;
}
</style>