js(vue)获取本地上传图片的尺寸(宽高)

Right atrium

于 2021-11-23 21:42:01 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Kino_Hs/article/details/121503401

Vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

此篇博客介绍如何使用JavaScript进行前端文件上传验证，特别关注图片类型限制为JPEG，并演示了使用FileReader进行Base64转换和Image对象检测图片尺寸以便后续裁剪功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input id="file" @change="uploadImegs($event,3)" type="file" accept="image/*" />

uploadImegs(e) {
    let _file = e.target.files[0];
    if (_file) {
        if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
            this.$Message.info("图片类型必须是,jpeg,jpg,png中的一种");
            return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function() {
                let width = 0
                let height = 0
                console.log("宽" + this.width, "高" + this.height)
            };
            let data;
            data = e.target.result;
            this.cropperData.imgUrl = data;
        };
        reader.readAsDataURL(_file);
    }
    e.target.value = ""
}