vue自定义校验，校验图片宽高

先上代码

// let readerFn = (file) => new Promise(function (resolve, reject) {
//     let reader = new FileReader();
//     reader.readAsDataURL(file);
//     reader.onload = function () {
//         resolve(this.result);
//     };
// });
let imgFn = (url) => {
    return new Promise(function (resolve, reject) {
        let img = new Image();
        img.src = url;
        img.onload = function () {
            resolve(img);
        };
    });
};
// 校验图片宽高
let validateImg = async (rule, value, callback) => {
    if (this.imgList.length === 0) {
        return callback(new Error('请上传图片'));a
    }
     //this.imgList[0].url是图片的url
    const url = this.imgList[0].url;
    //若要校验图片文件则要先调用readerFn方法
    // let file = this.imgList[0].raw;
    // let reader=await readerFn(file);
    const img = await imgFn(url);
    console.log(img.width);
    if (img.width !== 1200 || img.height !== 900) {
        return callback(new Error('仅支持900x1200px尺寸图片'));
    }
    return callback();
};

FileReader.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

instanceOfFileReader.readAsDataURL(blob);

参数
blob：即将被读取的 Blob 或 File 对象。

Image()

Image()函数将会创建一个新的HTMLImageElement实例。

它的功能等价于 document.createElement('img')

语法

Image(width, height)

参数
width：图片的宽度 (即 width 属性).
height：图片的高度 (即 height 属性).

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);