react + antd upload上传图片 校验图片大小、格式、尺寸

在react+antd的项目中，需要校验图片的尺寸大小，记录一下~~

话不多说，上代码

antd组件的调用

<Upload
    action='接收url'
    listType="picture-card"
    data={this.handleUpload}
    file={file}
    onPreview={this.handlePreview}
    beforeUpload={this.beforeUpload}
    onChange={this.onChange}
>
    {file.length >= 1 ? null : uploadButton} // 限制图片数量
</Upload>

在图片上传之前，校验图片的尺寸大小 

也可以根据图片的url校验图片的尺寸哦~，只需要把img.src = 图片的url就可以啦

beforeUpload = (file) => {
// console.log(file); // file.size:文件大小, file.type: 文件类型
        const width = 360;
        const height = 550;
        return new Promise((resolve, reject) => {
            let reader = new FileReader();
            reader.addEventListener(
                'load',
                () => {
                    let img = new Image();
                    img.src = reader.result; 
                    img.onload = () => {
                        if (img.width < width || img.height < height) {
                            message.error('请上传宽高大于等于 360*550 的封面图！');
                            reject(new Error('请上传宽高大于等于 360*550 的封面图！'));
                        } else {
                            resolve();
                        }
                    };
                },
                false
            );
            reader.readAsDataURL(file);
        });
 };

温馨提示：file里面属性可以判断文件的格式和大小等 ，有需要的小伙伴可以打印看看

有不明白的就多打几个console.log吧 嘻嘻~~