<a-upload
:before-upload="beforeUpload"
>
// 上传图片宽高比例限制
const beforeUpload = file => {
return new Promise((resolve, reject) => {
// // 图片类型限制
// let isJpgOrPng = file.type === 'image/png' || file.type === 'image/jpg';
// if (!isJpgOrPng) {
// message.error('格式错误,只能上传jpg、jpeg、png');
// return reject(false);
// }
// 图片宽高比例限制
let w = 0,
h = 0;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const image = new Image();
image.src = reader.result;
image.onload = () => {
w = image.width;
h = image.height;
const ratio = 670 / 320;
if (w / h == ratio) {
// 图片比例为670*320横纵比一致
return resolve(true);
} else {
message.error('图片尺寸错误,只能上传670x320横纵比一致的图片');
return reject(false);
}
};
};
// 图片大小限制
let isLt1M = file.size / 10240 / 10240 <= 1;
if (!isLt1M) {
message.error('图片大小超过10MB!');
return reject(false);
}
// return isJpgOrPng && isLt1M; // 限制宽高比例、大小及类型
return isLt1M; // 只限制宽高和大小
});
};
antd upload上传图片限制图片类型大小以及宽高尺寸
最新推荐文章于 2025-06-04 16:22:03 发布