iview upload 上传图片前判断高宽

• 2018-07-13
• 0
• 0

因项目要求，图片上传前需要获取宽高，判断上传的图片是否符合分辨率，话不多说，直接上代码
– test.vue html

<Upload action="https://bbs.okii.com/api/common/uploadFile"
        :format="['jpg','png']"
        :before-upload="beforeUpload"
        :on-progress="onUpload"
        :on-success="onSuccess">
        <Button type="ghost" icon="ios-cloud-upload-outline">上传750*324像素的图片</Button>
</Upload>

• test.vue js

beforeUpload(file) {
    // let vm = this;
    let fr = new FileReader();
    fr.onload = e => {
        let src = e.target.result;
        const image = new Image();
        image.onload = function() {
            console.log(this.width);  
            console.log(this.height); //这里获取到宽、高了，接下来就做判断，然后不符合要求就返回false阻止上传
        };
        image.src = src;
    };
    fr.readAsDataURL(file);
    console.log(file);
}