antd upload上传获取文件宽高

最新推荐文章于 2023-05-06 13:26:42 发布

wo_dxj

最新推荐文章于 2023-05-06 13:26:42 发布

阅读量3.6k

点赞数

分类专栏：前端 React Ant Design 文章标签： javascript antd-upload 获取图片宽高 reactjs

本文链接：https://blog.youkuaiyun.com/wo_dxj/article/details/107868185

版权

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

React

4 篇文章

订阅专栏

Ant Design

4 篇文章

订阅专栏

在项目中遇到需求，需要在使用antd的upload组件上传图片时判断图片的宽高。由于antd-upload本身不提供该功能，可以通过在beforeUpload方法中利用外部API来获取。通过这种方式，可以实现对上传图片宽高的有效判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目新加的需求，需要判断上传图片的宽高，查了一下antd-upload组件貌似不支持这个查询，因此需要使用外部的API，直接上代码：beforeUpload 方法

handleBeforeUpload = async (file, fileList) => {
        const {fileMinSize = 0,fileMinWH,fileMaxWH, fileMaxSize = 50,uploadFormat = '',uploadFormatError = ''} = this.component.props;
        const isInRange = ((file.size > (fileMinSize * 1024 * 1024)) && (file.size < (fileMaxSize * 1024 * 1024)));
        let isTrueType = true,isFileWH = true;//类型，尺寸
        return new Promise((resolve, reject) =>{
            //校验格式
            if(uploadFormat != ''){
                let acceptArr = uploadFormat.split(',');
                let fileType = file.name.substring(file.name.lastIndexOf('.'));
                if(!acceptArr.includes(fileType)){
                    isTrueType = false;
                    this.message.error((uploadFormatError == '') ? '请上传规则范围内的文件!' : uploadFormatError);
                    this.base.ss({'data.fileList': fileList.pop()});
                }
            }
            //校验大小

            if (!isInRange) {//大小的标识
                this.message.error((fileMaxSize == 50) ? '请上传规则范围内的文件!' : '文件最大不能超过'+ fileMaxSize + 'M！');
                this.base.ss({'data.fileList': fileList.pop()});
            }


            //校验宽高
            /*********************************/

            if(fileMinWH && fileMaxWH){//做下过滤有的图片需要过滤
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = (e) => {
                    //加载图片获取图片真实宽度和高度
                    var image = new Image();
                    image.src=reader.result;
                    image.onload = () =>{
                        var width = image.width;//图片的宽
                        var height = image.height;//图片的高
                        if(width < fileMinWH  || width > fileMaxWH || height < fileMinWH  || height > fileMaxWH){
                            isFileWH = false;
                            this.message.error('***宽高需要均大于600像素，小于4000像素');
                            this.base.ss({'data.fileList': []});
                            reject();
                        }else{
                            resolve(isFileWH && isInRange && isTrueType)
                        }
                    };
                };
                /**********************************/
            }else{
                resolve(isInRange && isTrueType);
            }
        })
    };

这样这个功能就可以完美的解决了,*包着的代码是最主要的。