使用方法
● 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对象