js 获取上传图片和视频的宽高，还有视频的时长

场景：

当产品经理告诉你说：我们需要限制上传的图片或视频的尺寸，不符合要求不允许上传，这个时候你该怎么做？

不用多想，很明显我们需要想办法拿到图片或视频的宽度，然后和预期的尺寸进行对比过滤，就能轻易实现这个需求。

 

上代码：

// 获取素材宽高
    getMaterialResolution (info, callback) {
      const _this = this
      const reader = new FileReader()
      let width = 0
      let height = 0
      reader.readAsDataURL(info.file)
      reader.onload = function (e) {
        info.file['url'] = e.target.result
        if (info.file.type.includes('image/')) { // 如果是图片，获取图片宽高
          const image = new Image()
          image.src = info.file['url']
          image.onload = function () {
            width = image.width
            height = image.height
            console.log('width, height:', width, height)
            callback(width, height)
          }
        } else if (info.file.type.includes('video/')) { // 如果是视频，获取视频的宽高和时长，只能获取到H264及以上视频编码协议（MPEG-4编码格式也获取不到）
          const videoUrl = URL.createObjectURL(info.file)
          const videoObj = document.createElement('video')
          videoObj.preload = 'metadata'
          videoObj.src = videoUrl
          videoObj.onloadedmetadata = function (evt) {
            URL.revokeObjectURL(videoUrl)
            _this.form.videoDuration = Math.round(videoObj.duration) // 视频的时长
            width = videoObj.videoWidth
            height = videoObj.videoHeight
            console.log('width, height:', width, height)
            callback(width, height)
          }
        }
      }
    },

上面的这个方法是非常完整了，注意：

image是拿Image 类型的对象实例的height和width字段，video需要创建一个类型为video的html元素，然后在onloadedmetadata 事件中去获取这个元素的videoWidth和videoHeight。 当天时长duration也可以直接从这个元素对象中获取。

还有就是如果是视频，获取视频的宽高和时长，只能获取到H264及以上视频编码协议的视频文件（MPEG-4编码格式也获取不到），当然我们可以想办法直接不让非符合要求编码的视频进行上传，但是目前没有找到非常合适又简便的方法。欢迎有此经验的朋友提供帮助，谢谢！

然后我们只需要调用这个方法，在回调函数中就能拿到想要的数据了。

getMaterialResolution(file, (width, height) => {
   // todo 处理图片或视频尺寸是否符合要求的逻辑
)