antd upload上传如何获取文件宽高

 更新时间:2023年02月12日 14:23:43   作者:wo_dxj  
这篇文章主要介绍了antd upload上传如何获取文件宽高问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

antd upload上传获取文件宽高

项目新加的需求,需要判断上传图片的宽高,查了一下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);
            }
        })
    };

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

antd上传文件限制大小 react Hooks

 const uploadImages = {
        action: requestUrl + '/api/common/CommonUpload',
        headers: {
            SessionKey: `${localStorage.getItem('sk')}`,
        },
        data: (file) => {
            return {
                UploadType: 1027,//后端定义的type
                Id: uuidv4(),
                FileType: getUploadFileType(file),
            };
        },
        beforeUpload: (file) => {// 礼品image
            const limitFileNameLen = 100;
            return new Promise((resolve, reject) => {
                if (file.name && file.name.length > limitFileNameLen) {
                    message.error('Please upload a file with a file name less than 100 characters');
                    //请上传文件名不超过100个字符的文件
                    return Promise.reject();
                }
                const limitM = 2;
                const isLimit = file.size / 1024 / 1024 <= limitM;
                console.log(isLimit);
                if (!isLimit) {
                    message.error('The size exceeds the limit');
                    return Promise.reject();
                }
                return resolve();
            });
        },
    }

模板:

 <Upload
                {...uploadImages}
                accept=".jpeg,.png,.jpg"
                listType="picture-card"
                fileList={fileList}
                onChange={handleChange}
                onPreview={handlePreview}
            >
                {fileList.length >= 4 ? null : uploadButton}
            </Upload>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React-router v4 路由配置方法小结

    React-router v4 路由配置方法小结

    本篇文章主要介绍了React-router v4 路由配置方法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 解决React报错The tag is unrecognized in this browser

    解决React报错The tag is unrecognized in this browser

    这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React+Webpack快速上手指南(小结)

    React+Webpack快速上手指南(小结)

    这篇文章主要介绍了React+Webpack快速上手指南(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • react redux入门示例

    react redux入门示例

    本篇文章主要介绍了react redux入门示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 从零搭建react+ts组件库(封装antd)的详细过程

    从零搭建react+ts组件库(封装antd)的详细过程

    这篇文章主要介绍了从零搭建react+ts组件库(封装antd),实际上,代码开发过程中,还有很多可以辅助开发的模块、流程,本文所搭建的整个项目,我都按照文章一步一步进行了git提交,开发小伙伴可以边阅读文章边对照git提交一步一步来看
    2022-05-05
  • React 跨端动态化核心技术实例分析

    React 跨端动态化核心技术实例分析

    这篇文章主要为大家介绍了React 跨端动态化核心技术实例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React之PureComponent的使用作用

    React之PureComponent的使用作用

    这篇文章主要介绍了React之PureComponent的使用作用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • React Navigation 路由传参的操作代码

    React Navigation 路由传参的操作代码

    这篇文章主要介绍了React Navigation 路由传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • React实现双向绑定示例代码

    React实现双向绑定示例代码

    这篇文章给大家介绍了在React中如何实现双向绑定,文中给出了示例代码,对大家的理解与学习很有帮助,有需要的朋友下面来一起看看吧。
    2016-09-09
  • react的ui库antd中form表单使用SelectTree反显问题及解决

    react的ui库antd中form表单使用SelectTree反显问题及解决

    这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论