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

一、上传图片的宽高限制

在组件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",

与上文限制图片宽高类似，在APIbeforeUpload中做验证

beforeUpload: file => {if (file.type !== "image/png" && file.type !== "image/jpeg") {message.error("仅支持上传jpg/png格式的文件");}return file.type === "image/png" || file.type === "image/jpeg";}