vue3上传图片，限制图片尺寸

晒黑的小神仙

已于 2022-10-27 18:52:51 修改

阅读量2.2k

点赞数

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

于 2022-10-25 17:09:09 首次发布

本文链接：https://blog.csdn.net/weixin_61273407/article/details/127517273

版权

JavaScript 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Vue

20 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

// 上传前校验图片
const beforeUpload = (file) => {
    // 判断格式
    const types = ["image/jpg", "image/png", "image/jpeg", "image/gif"];
    const isJPG = types.includes(file.type);
    if (!isJPG) {
        ElMessage.error("上传图片格式不正确");
    }

    // 判断体积大小
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!isLt2M) {
        ElMessage.error("上传头像图片大小不能超过 1MB!");
    }

    //判断尺寸大小
    const isSize = new Promise(function (resolve, reject) {
        let width = 750;
        let height = 750;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function () {
            let valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
    }).then(
        () => {
            return file;
        },
        () => {
            ElMessage.error("上传的图片尺寸过大，请重新上传");
            return Promise.reject();
            //必须加上return false; 才能阻止
            return false;
        }
    );
    return isJPG && isLt2M && isSize;
};