上传图片尺寸校验

使用方法

● 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对象