前端基于ElementUI上传视频文件时校验分辨率和时长

最近产品提了一个需求，前端上传视频或者图片的时候需要校验分辨率，且视频要校验视频的时长，这时候心里就开始嘀咕了，JS能做到对视频的校验嘛？后来发现可以通过将file对象通过URL.createObjectURL这个方法，转换成video实体DOM，再根据loadedmetadata这个事件获取到视频的一些相关信息，因为事件本身是异步的，所以封装成了一个Promise。

// 获取视频信息
getVideoPlayerInfo(file) {
  return new Promise(resolve => {
    let videoElement = document.createElement('video');
    videoElement.src = URL.createObjectURL(file);
    videoElement.addEventListener('loadedmetadata', function() {
      resolve({
        duration: videoElement.duration,
        width: videoElement.videoWidth,
        height: videoElement.videoHeight
      });
    });
  });
},

// 校验这些信息
validateVideoPlayerInfo(file) {
    this.getVideoPlayerInfo(file).then(videoInfo => {
      const { duration, width, height } = videoInfo;
      // 这里可以对这些信息进行一些校验操作
      // ......
  });
},

图片也是类似的操作，不过可以通过new Image直接创建Image的DOM，在通过load事件获取

getImageInfo(file) {
  return new Promise(resolve => {
    const image = new Image();
    image.src = URL.createObjectURL(file);
    image.addEventListener('load', () => {
      const { width, height } = image;
      resolve({ width, height });
    });
  });
},

// 校验图片分辨率
validateImageResolutionInfo(file) {
  return new Promise((resolve, reject) => {
    this.getImageInfo(file).then(imageInfo => {
      const { width, height } = imageInfo;
      });
});

同样的操作也可以用在音频上audio