请知悉:本文最近一次更新为 2年 前,文中内容可能已经过时。

Antd属于常用的前端框架了,如何限制图片上传时的宽高呢?主要使用了Upload空间的beforeUpload事件。

限制图片宽高的示例代码:

beforeUpload: file => {
this.handleFilebeforeUpload(file)
.then(() => {
message.success(`上传成功`);
})
.catch(() => {
Modal.error({
title: "上传图片的宽高不符合要求,请重传!(宽高不得超过1500)"
});
});
},

handleFilebeforeUpload = file => this.checkImageWH(file, 1500, 1500);

// 上传图片尺寸限制
checkImageWH(file, width, height) { // 参数分别是上传的file,想要限制的宽,想要限制的高
return new Promise(function(resolve, reject) {
let filereader = new FileReader();
filereader.onload = e => {
let src = e.target.result;
const image = new Image();
image.onload = function() {
if (this.width >= width && this.height >= height) { // 上传图片的宽高与传递过来的限制宽高作比较,超过限制则调用失败回调
reject();
} else {
resolve();
}
};
image.onerror = reject;
image.src = src;
};
filereader.readAsDataURL(file);
});
}

参考资料

antd 中 Upload 上传图片宽高限制以及上传文件的格式限制


如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


与《Antd Upload 如何限制图片上传时的宽高》相关的博文:


留言

avatar
😀
😀😁😂😅😭🤭😋😘🤔😰😱🤪💪👍👎🤝🌹👌