关于vue.js:前端基于ElementUI上传视频文件时校验分辨率和时长

47次阅读

共计 1082 个字符，预计需要花费 3 分钟才能阅读完成。

最近产品提了一个需要，前端上传视频或者图片的时候须要校验分辨率，且视频要校验视频的时长，这时候心里就开始嘀咕了，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

正文完