react的antd的upload组件上传限制图片尺寸和视频宽高，大坑比

最近用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)
  }

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