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捕获并处理异常的方式

    React捕获并处理异常的方式

    这篇文章主要给大家介绍了React优雅的捕获并处理渲染异常方式,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • 使用React+SpringBoot开发一个协同编辑的表格文档实现步骤

    使用React+SpringBoot开发一个协同编辑的表格文档实现步骤

    随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求,本文小编就将为大家介绍如何使用React+SpringBoot简单的开发一个协同编辑的表格文档,感兴趣的朋友一起看看吧
    2023-11-11
  • React Native中Mobx的使用方法详解

    React Native中Mobx的使用方法详解

    这篇文章主要给大家介绍了关于React Native中Mobx的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • Docker部署SpringBoot项目到云服务器的实现步骤

    Docker部署SpringBoot项目到云服务器的实现步骤

    Docker作为一种轻量级的容器化技术,为开发者提供了快速、便捷的部署方案,本文主要介绍了Docker部署SpringBoot项目到云服务器,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • react字符串匹配关键字高亮问题

    react字符串匹配关键字高亮问题

    这篇文章主要介绍了react字符串匹配关键字高亮问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 在 React 中使用 i18next的示例

    在 React 中使用 i18next的示例

    这篇文章主要介绍了在 React 中使用 i18next,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • 详细聊聊React源码中的位运算技巧

    详细聊聊React源码中的位运算技巧

    众所周知在React中,主要用到3种位运算符 —— 按位与、按位或、按位非,下面这篇文章主要给大家介绍了关于React源码中的位运算技巧的相关资料,需要的朋友可以参考下
    2021-10-10
  • React实现点击删除列表中对应项

    React实现点击删除列表中对应项

    本文主要介绍了React 点击删除列表中对应项的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • React Suspense前后端IO异步操作处理

    React Suspense前后端IO异步操作处理

    这篇文章主要为大家介绍了React Suspense前后端IO异步操作处理示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • React常见的 HOC 使用案例及示例代码

    React常见的 HOC 使用案例及示例代码

    高阶组件(Higher-Order Component,HOC)是一种用于在 React 中复用组件逻辑的技术,这篇文章主要介绍了React常见的 HOC 使用案例示例代码,需要的朋友可以参考下
    2024-08-08

最新评论