vue3 ts element-plus上传图片限制大小 尺寸 格式

 在el-upload标签添加属性 :before-upload

<el-upload
    :before-upload="beforeAvatarUpload"
    name="img_file"
    :data="{img_type: 3}"
    accept="image/jpg, image/jpeg, image/png">
</el-upload>

定义限制图片的方法 

import {ElMessageBox, UploadProps, UploadUserFile} from 'element-plus'

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
        return new Promise((resolve, reject) => {
            var reader = new FileReader();
            reader.onload = function (event) {
                var txt = event.target.result;
                var img = document.createElement("img");
                img.src = txt;
                img.onload = function () {
                    if (img.width>196 || img.height>110) {
                        ElMessage.error('图片尺寸最大为196*110')
                        return reject(false);
                    }
                }
            };
            reader.readAsDataURL(rawFile);
            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
                ElMessage.error('图片仅支持jpg、jpeg、png格式!')
                return reject(false);
            } else if (rawFile.size / 1024 / 1024 > 3) {
                ElMessage.error('图片大小不能超过3M!')
                return reject(false);
            }
        });
    }