首页 > 其他分享 >react+antd upload实现图片宽高、视频宽高尺寸校验

react+antd upload实现图片宽高、视频宽高尺寸校验

时间:2022-08-24 14:14:00浏览次数:80  
标签:const 宽高 upload react canContinue video file 校验 上传

图片宽高校验方法:

  // 上传图片尺寸限制
  const checkIconWH = (file: any) => {
    return new Promise<void>(function (resolve, reject) {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        const image = new Image();
        image.onload = function () {
          if (image.width !== 512 && image.height !== 512) {
            reject();
          } else {
            resolve();
          }
        };
        image.onerror = reject;
        image.src = e?.target?.result && isString(e?.target?.result) ? e?.target?.result : '';
      };
      fileReader.readAsDataURL(file);
    });
  };

  

视频宽高校验方法:

  // 上传mp4尺寸限制
  const checkVideoWH = (file: any, width: number, height: number) => {
    return new Promise<void>(function (resolve, reject) {
      const url = URL.createObjectURL(file);
      const video = document.createElement('video');
      video.onloadedmetadata = () => {
        URL.revokeObjectURL(url);
        console.log(video.videoWidth, video.videoHeight)
        if (video.videoWidth < width || video.videoHeight < height) {
          reject()
        } else {
          resolve()
        }
      }
      video.src = url;
      video.load();
    });
  };

  

校验使用(在上传之前的beforeUpload方法中使用):

/**
   * 上传请求
   * @param {object} file - 上传的文件
   * @param {object} item - 上传的信息
   * @param {string} type - 上传的类型
   */
  const upLoad = async (file: RcFile, item: PropsConfig, type?: string) => {
    let canContinue = true;
    //如果是icon,检测尺寸
    if (item.type === 'icon') {
      await checkIconWH(file)
        .then(() => {
          canContinue = true;
        })
        .catch(() => {
          canContinue = false;
          message.error('ICON需为512X512px,PNG格式的图片,请确认后重新上传');
          return;
        });
    }
    //如果是mp4,检测尺寸
    if (item.type === 'mp4' && fileWidth && fileHeight) {
      await checkVideoWH(file, fileWidth, fileHeight)
        .then(() => {
          canContinue = true;
        })
        .catch(() => {
          canContinue = false;
          message.error(fileCheckMsg || '文件校验失败');
          return;
        });
    }
    //如果是mp4且需要检测大小(fileSize单位是MB)
    if (item.type === 'mp4' && fileSize) {
      console.log(file, fileSize)
      if (file.size / 1024 / 1024 > fileSize) {
        canContinue = false;
        message.error(fileCheckMsg || '文件校验失败');
        return;
      }
      canContinue = true;
    }
    if (!canContinue) return;
……………省略剩余代码……………

  

 

标签:const,宽高,upload,react,canContinue,video,file,校验,上传
From: https://www.cnblogs.com/nangras/p/16619680.html

相关文章

  • reactive函数
    <template><div><h1>vue3</h1><span>{{info.name}}-{{info.age}}</span><button@click="infobtn">修改info</button></div></template><scrip......
  • React报错之React hook 'useState' cannot be called in a class component
    正文从这开始~总览当我们尝试在类组件中使用useState钩子时,会产生"Reacthook'useState'cannotbecalledinaclasscomponent"错误。为了解决该错误,请将类组件转换......
  • 07-React Hooks(路由组件懒加载, Context上下文, 组件优化...)
    扩展setState(1).setState(stateChange,[callback])------对象式的setState1.stateChange为状态改变对象(该对象可以体现出状态的更改)2.callback是可选的......
  • 04-React路由5版本(高亮, 嵌套, 参数传递... )
    React-Router-Dom(路由版本[5])简介React的一个插件库用于实现SPA应用基于React的项目基本都用API<BrowserRouter><HashRouter><Route><Redirect><Link><Na......
  • 01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)
    引入JS#react开发JSreact.development.js#reactdom渲染JSreact-dom.development.js#jsx语法转换JSbabel.min.js#参数传值校验JSprop-types.jsJSX语法#......
  • React hooks
    Reacthooks最近闲来无事,Vue3的语法写的有点疲了,想起来以前还用React框架搭建过项目,回来拉取了一个React框架准备再复习一下React,感叹当年学习React的艰辛过程啊,记录一下R......
  • react-router-dom v6 路由参数
    1.通过state传参(HashRouter会丢失,BrowserRouter不会丢失)传参页面import{useNavigate}from"react-router-dom";constnavigate=useNavigate()navigate("/ho......
  • react三大核心之一props
    -html标签可以在标签上写自定义属性,那么react的组件,也可以像传属性一项,给组件传props;react组件接收到传入的属性后,会自动塞进实例的props属性中,通过this.props可以拿到外......
  • React报错之React Hook 'useEffect' is called in function
    正文从这开始~总览为了解决错误"ReactHook'useEffect'iscalledinfunctionthatisneitheraReactfunctioncomponentnoracustomReactHookfunction",可以将......
  • 实现最简单的 React DOM Diff 算法
    实现最简单的ReactDOMDiff算法本文写于2022年08月22日定义VNode与VNodeList类型首先我们定义一个简单的VNode类型。typeFlag="Placement"|"Delet......