关于vue.js:前端基于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