vue3 ts element-plus上传图片限制大小 尺寸 格式
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);
}
});
}
更多推荐
已为社区贡献2条内容
所有评论(0)