在vue中获取input上传图片的宽和高

项目中有一个需求是需要上传190px*192px的png图片，一般直接在files.input[0]里面是找不到的，所以要变个思路了。

上代码

// html
<input type="file" accept="image/png" name="iconFile" @change="getFile">
// js
getFile (e) {
    let imgSrc = window.URL.createObjectURL(e.target.files[0]);
    let img = new Image();
    img.src = imgSrc;
    let this_ = this; // onload 里面不能用this
    let type = this.formData.iconFile.type.split('/')[1];
    img.onload = function () {
    	// 我在这里就可以获取到图片的宽度和高度了 img.width 、img.height
        if ((img.width === 192) && (img.height === 192) && (type === 'png')) {
        this_.$Message.success({content: '真棒！！！'})
        // todo
        } else {
            e.target.value = null
            this_.$Message.error({content: '选的啥玩意！'})
        }
    };
},

思路

1. 把我选择上传的图片资源拿过来；
2. new Image()；
3. 把拿来的资源塞到new出来的img里面，里面，嗯 没错；
4. 新建的image加载完后就可以拿到新建的image的高和宽了；

我没有测试兼容性，不知道兼容怎么样，我的谷歌可以运行