一、上传图片的宽高限制
在组件Upload中有一个beforeUpload的API,是文件上传之前的钩子函数,我们需要在这个API中做限制
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);
});
}
二 、上传文件的格式限制,
在组件Upload中上传文件的格式限制有两种方法
- API :
accept
接收类型字符串,将想要接收的类型拼接字符串并使用英文逗号隔开
accept: ".bmp,.gif,.png,.jpeg,.jpg",
- 与上文限制图片宽高类似,在API
beforeUpload
中做验证
beforeUpload: file => {
if (file.type !== "image/png" && file.type !== "image/jpeg") {
message.error("仅支持上传jpg/png格式的文件");
}
return file.type === "image/png" || file.type === "image/jpeg";
}