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>

总结

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

相关文章

  • Rect Intersection判断两个矩形是否相交

    Rect Intersection判断两个矩形是否相交

    这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • jenkins分环境部署vue/react项目的方法步骤

    jenkins分环境部署vue/react项目的方法步骤

    这篇文章主要介绍了jenkins分环境部署vue/react项目的方法,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • react中涉及的增加,删除list方式

    react中涉及的增加,删除list方式

    这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解超简单的react服务器渲染(ssr)入坑指南

    详解超简单的react服务器渲染(ssr)入坑指南

    这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • ahooks useRequest源码精读解析

    ahooks useRequest源码精读解析

    这篇文章主要为大家介绍了ahooks useRequest的源码精读解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果,继而引发的一系列思考,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • React Hooks之使用useCallback和useMemo进行性能优化方式

    React Hooks之使用useCallback和useMemo进行性能优化方式

    这篇文章主要介绍了React Hooks之使用useCallback和useMemo进行性能优化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • webpack 2的react开发配置实例代码

    webpack 2的react开发配置实例代码

    本篇文章主要介绍了webpack 2的react开发配置实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 关于useEffect执行两次的问题及解决

    关于useEffect执行两次的问题及解决

    这篇文章主要介绍了关于useEffect执行两次的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论