后台视频上传校验

最近后台有个需求，需要上传视频时校验视频的宽高，还得给服务端传时长，码率过去，没弄过呀，那赶紧百度吧，我用的是element-ui的up-load组件，先来看看常用的图片上传校验，一般在before-upload时校验上传文件：

function beforeAvatarUpload(file, width, height) {
const self = this
const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          self.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          self.$message.error('上传头像图片大小不能超过 2MB!');
        }
        
  let isSize = new Promise(function(resolve, reject) {
     const url = URL.createObjectURL(file)
      let src = e.target.result
      const image = new Image()
      image.onload = function() {
        if (width && self.width / self.height !== width / height) {
          self.$message.error({
            title: '上传图片的宽高不符合要求，请重传',
          })
          reject()
        } else {
          resolve()
        }
      }
      image.onerror = reject()
      image.src = src
  })
  return isJPG && isLt2M && isSize;
}

思路就是加载一个图片标签，然后获取宽高， 注意return isJPG && isLt2M && isSize的顺序不能变哦，因为isSize是最后返回的一个Promise对象，需要根据它的状态来判断是否校验通过，如果放前面会直接转为true，校验就会失效。

视频校验如下:

function beforeAvatarUpload(file, width, height) {
const self = this
const isMP4 = file.type === 'video/mp4';
        const isLt20M = file.size / 1024 / 1024 < 20;

        if (!isMP4) {
          self.$message.error('上传视频只能是 MP4 格式!');
        }
        if (!isLt20M) {
          self.$message.error('上传视频大小不能超过 20MB!');
        }
        
  let isSize = 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) {
        self.$message.error({
          title: '上传视频的宽高比例不符合要求，请重传',
        })
        reject()
      } else {
        resolve()
      }
    }
    video.src = url
    video.load() 
  }) 
   return isMP4 && isLt20M && isSize;
}

基本和图片一样，但是加载函数换成了onloadedmetadata，宽高换成了videoHeight和videoWidth。视频时长和码率都可以通过video标签拿到，但是直接console.log(video)是看不到的，需要使用console.log(evt)也就是事件参数查看。

但是还没完哦，过了几天，测试发现有视频死活上传不上去，校验无法通过，赶紧查看一下，发现js获取到的videoHeight和videoWidth都为0！看视频文件未发现任何异常。

经过几番查找才发现原因是这个文件的编码格式不是h264！，使用格式工厂转化一下就好。

关于h5的video标签还有很多不熟悉的地方，还需要多多学习才行~~