上传图片尺寸校验

使用方法

● Image
● URL
● onload

代码：

 async validImageSize(file, imgWidth, imgHeight) {
		    const img = new Image()
		    img.src = URL.createObjectURL(file)
		    const { w, h } = await new Promise((resolve, reject) => {
		      img.onload = () => {
		        const { width: w, height: h } = img;
		        resolve({ w, h })
		      }
		    })
		    if (w !== imgWidth || imgHeight !== h) {
		      return false
		    }
		    return true
}

async useWay(){
      // 图片尺寸限制
      const is170x170 = await this.validImageSize(file,170,170) ;
      if(!is170x170){
        self.$message.error("上传图片仅支持170x170尺寸");
        return 
      }
}

思考：

onload事件：会在页面或图像加载完成后立即发生。

● 首先 onload事件是在资源加载后自主调用的；
● 上述代码中只是利用事件，获取了资源所需属性；
● 跟onload事件不能主动调用不冲突；

Image：

new Image(w,h) 创建一个img标签设置宽高
URL: 返回一个新创建的 URL 对象，表示由一组参数定义的 URL

new URL(url,base)

● url：是一个表示绝对或相对 URL 的 DOMString。如果url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数base是否存在，都将被忽略。
● base 可选：是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为 ‘’。
URL.createObjectURL(object)
● object为File对象，Blod对象，MediaSource对象