欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-25 21:47:50
...

在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的高和宽了;

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