before-upload 方法，传入了fIle

file 其实是一个blob对象，可以直接创建 一个 url

之后就是new Image + promise，在onload 中 resolve

这个问题的难点是一开始不知道 before-upload 是支持异步 的。

后面才知道 before-upload 方法直接返回reject 状态的promise 就可以

代码如下；

  1.  function GenerageVerifyPicMeasurement(x: number, y: number) {
  2.   return function (file: any) { // file 必须是 element-ui 的uplaod 组件 传入的file 类型，是一个blob
  3.     return new Promise((resolve, reject) => {
  4.       var urlCreator = window.URL || window.webkitURL;
  5.       var imageUrl = urlCreator.createObjectURL(file);
  6.       let img = new Image();
  7.       img.src = imageUrl;
  8.       img.onload = function name(e) {
  9.         var width = img.naturalWidth;
  10.         var height = img.naturalHeight;
  11.         if (width == x && height == y) {
  12.           resolve(true)
  13.         } else {
  14.           reject(false)
  15.           file.value = "";
  16.         }
  17.       }
  18.     })
  19.   }
  20. }
  1. // 下面是vue 的部分代码
  2. created() {
  3.   this._verifyPic = GenerageVerifyPicMeasurement(this.verfiySize[0] as number, this.verfiySize[1] as number);
  4. },
  5.   data() {
  6.     return {
  7.       setUploadHeader: {
  8.         Authorize: getCookie(),
  9.       },
  10.     };
  11.   },
  12.     destroyed() {},
  13.       methods: {
  14.         handleBeforeUpload(file: File) {
  15.           let index = file.name.lastIndexOf(".");
  16.           let fileType = file.name.slice(index);
  17.           let regImage = /(.jpg|.jpeg|.gif|.png|.bmp)$/g;
  18.           const isLimitSize = file.size / 1024 / 1024 < 5;
  19.           return new Promise(async (resolve, reject) => {
  20.             if (this.verfiySize[0] !== 0) {
  21.               try {
  22.                 let verifySize = await this._verifyPic(file);
  23.                 if (!verifySize) {
  24.                   this.$AlertTip(`请上传正确的图片尺寸${this.verfiySize[0]}*${this.verfiySize[1]}px`);
  25.                   reject(verifySize);
  26.                 }
  27.               } catch (error) {
  28.                 this.$AlertTip(`请上传正确的图片尺寸${this.verfiySize[0]}*${this.verfiySize[1]}px`);
  29.                 reject(false);
  30.               }
  31.             }
  33.             if (!regImage.test(fileType)) {
  34.               this.$AlertTip("请上传正确的图片格式文件");
  35.               reject(false);
  36.             }
  37.             if (!isLimitSize) {
  38.               this.$AlertTip("上传的图片最大不能超过5M");
  39.               reject(false);
  40.             }
  41.             resolve(true);
  42.           });
  43.         },
  44.       }

URL.createObjectURL()文档：

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL