react的antd的upload组件上传限制图片尺寸和视频宽高，大坑比_ant 文件上传 限制视频-程序员宅基地

技术标签： antd  upload  react  

最近用antd写后台管理系统，首次接触antd，刚开始蛮顺利的，到后面坑越来越多，基本解决了，后续我会继续和大家分享我遇到的坑，现在先来搞一搞这个Upload组件，这个 组件上传的一些限制在beforeUpload这个方法里面调用，然后我直接写两个方法:

//checkImageWH  返回一个promise  检测通过返回resolve  失败返回reject阻止图片上传
export function checkImageWH(file, width, height) {
  return new Promise(function(resolve, reject) {
    let filereader = new FileReader()
    filereader.onload = e => {
      let src = e.target.result
      const image = new Image()
      image.onload = function() {
        if (width && this.width / this.height !== width / height) {
          // debugger
          Modal.error({
            title: '上传图片的宽高不符合要求，请重传',
          })
          reject()
          // } else if (height && this.height !== height) {
          //   Modal.error({
          //     title: '请上传高为' + height + '的图片',
          //   })
          //   reject()
        } else {
          resolve()
        }
      }
      image.onerror = reject
      image.src = src
    }
    filereader.readAsDataURL(file)
  })
}

这个是限制宽高比例的方法，你可以限死宽高，反正宽高是传进来的，上传的宽高你也可以拿到你爱怎么样限制就怎么限制，我在一个公共的地方写的，到时候你直接引进来就好，现在来看下如何限制视频宽高，说实话，第一次听说这种需求，上代码：

// 处理视频上传宽高
export function checkVideoWH(file, width, height) {
  return new Promise(function(resolve, reject) {
    const url = URL.createObjectURL(file)
    const video = document.createElement('video')
    video.onloadedmetadata = evt => {
      // Revoke when you don't need the url any more to release any reference
      URL.revokeObjectURL(url)
      if (width && video.videoWidth / video.videoHeight !== width / height) {
        Modal.error({
          title: '上传视频的宽高比例不符合要求，请重传',
        })
        reject()
      } else {
        resolve()
      }
    }
    video.src = url
    video.load() // fetches metadata
  })
}

写完这两个方法，然后在你当前页面引入，

// 先引进来
import { checkVideoWH，checkImageWH } from 'utils/upload'
// beforeUpload调用这个方法
handleFilebeforeUpload = file => {
    return checkVideoWH(file, 1200, 600) && checkImageWH(file, 1200, 600)
  }

然后就大功告成，唉我感觉有些坑还真难搞，如果兄弟你也刚好搞这个，可以加我好友大家一起讨论，妹子更好啦拉拉嘻嘻

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feizhong_web/article/details/100059938

智能推荐

HTML5标准学习 - 编码-程序员宅基地

文章浏览阅读60次。HTML5标准学习 - 编码 from:http://www.cnblogs.com/GrayZhang/archive/2011/04/11/learning-html5-charset.html相信每一个前端工程师都或多或少遇上过“乱码”这位仁兄，无论你的基...

AB压测工具的介绍及安装-程序员宅基地

文章浏览阅读1.9k次。今天我要和大家聊聊AB压测工具，如果你对网站性能测试感兴趣或有需要，那么这篇文章一定会帮到你。我曾经也因为缺少良好的压力测试工具而苦恼，直到我发现了AB压测工具。它可以帮助我们测试网站在高并发情况下的性能表现，让我们更好地了解网站的性能瓶颈和优化方向。接下来，我将为大家介绍AB压测工具的安装和使用方法，希望能够帮助大家更好地进行网站性能测试，提升网站的质量和用户体验。_ab压测工具

使用URL启动android默认浏览器，启动指定浏览器_scheme打开系统自带浏览器-程序员宅基地

文章浏览阅读847次。打开URL启动android默认浏览器，启动指定浏览器 分类： android2015-05-07 09:2718人阅读评论(0)收藏举报浏览器uri原文出自：http://blog.csdn.net/u013812046/article/details/39226515一、启动android默认浏览器　　Intent intent _scheme打开系统自带浏览器

计算机网络学习建议_计算机网络课程设计的建议-程序员宅基地

文章浏览阅读863次，点赞2次，收藏2次。计算机网络+计算机网络课程设计这门课挺有意思，是真的有意思，知道一个网络具体是怎么运作，然后还能自己动手配置一个网络，观察一个数据包的流转过程，不过学校的课程不是那么全面，讲得不是那么浅显易懂，学完只是懂了一些老古董。除此之外，课程安排确实让人吐槽，连上四节课，一般上到第三节课就已经熄火了，听不进去。关于课程设计安排更是有问题，思科学院的东西，如此现代，如此浅显易懂，居然让我们用课设时间去看，最关键的是，课设只有四天，你要看完一本书，这是不切实际的，完完全全地浪费了那么好的课程，所以不建议的那么安排。_计算机网络课程设计的建议

第三章--第二篇--开放式对话系统_开放式对话不支持多轮-程序员宅基地

文章浏览阅读545次。概念：开放式对话系统是指一种可以与用户进行自由对话的系统，用户可以提出任意话题的问题或发表意见，而系统能够理解用户的输入并做出相应的回应。与任务导向的对话系统不同，开放式对话系统更注重与用户的自由互动，旨在模拟人类的对话能力和语言交流。目标：开放式对话系统的目标是实现自然、流畅、有趣的对话体验，使用户感到与真实人类对话类似。自然性：系统能够理解用户的语言表达，包括词汇、语法、语义等，并以自然、流畅的方式进行回应，使用户感到在与真人交谈。_开放式对话不支持多轮

个人网站制作源代码_个人网站源码-程序员宅基地

文章浏览阅读9.2k次。/ 01 /前话《周末·听雨》包含动态雨滴效果，采用Dreamweaver软件制作，代码结构简单，DIV+CSS布局，目录结构为index.html页面、js、css和images文件夹。/ 02 /图摘/ 03 /_个人网站源码

随便推点

Android5.0 WebView中Http和Https混合问题-程序员宅基地

文章浏览阅读981次。http://blog.csdn.net/luofen521/article/details/51783914http://blog.csdn.net/luofen521/article/details/51783914http://blog.csdn.net/luofen521/article/details/51783914场景复现:

Laravel微信静默登录教程_laravel 微信登录-程序员宅基地

文章浏览阅读252次。注：用户表字段必须有oppid & session_key。_laravel 微信登录

Resources (library) in JSF 2.0_outputscript-程序员宅基地

文章浏览阅读339次。In JSF 2.0, all your web resources files like css, images or JavaScript, should put in “resources” folder, under the root of your web application (same folder level with “WEB-INF“).The sub-folder under_outputscript

文本处理命令（增删改查文本）_grep 找到重复的字符,删除-程序员宅基地

文章浏览阅读402次。一、显示文本（一）more命令1.语法格式格式：more [选项] filename功能：读取filename中的内容，逐屏往下翻页显示，按h显示帮助，按q退出。2.选项-d, --silent display help instead of ringing bell-f, --logical count logical rather than screen lines-l, --no-pause suppress pause after form feed-c, --print-over do_grep 找到重复的字符,删除

Git忽略文件的几种方法，以及.gitignore文件的忽略规则_git 忽略-程序员宅基地

文章浏览阅读1.1w次，点赞7次，收藏37次。除了可以在项目中定义**.gitignore文件外，还可以设置全局的git .gitignore文件**来管理所有Git项目的行为。这种方式在不同的项目开发者之间是不共享的，是属于项目之上Git应用级别的行为。这种方式也需要创建相应的.gitignore文件，可以放在C:/Users/用户名/目录下。_git 忽略

Android Design Support Library（二）用NavigationView实现抽屉菜单界面_安卓抽屉对界面-程序员宅基地

文章浏览阅读8.3k次，点赞6次，收藏17次。NavigationView在MD设计中非常重要，之前Google也提出了使用DrawerLayout来实现导航抽屉。这次，在Android Design Support Library中，Google提供了NavigationView来实现导航菜单界面。这次我们写的代码在Android用TabLayout实现类似网易选项卡动态滑动效果这篇文章代码的基础上进行修改，所以最好先看看上面这篇文章_安卓抽屉对界面

推荐文章

热门文章

相关标签