vue前端上传视频怎么获取视频尺寸

在Vue前端上传视频时，获取视频尺寸通常是在文件上传前预处理阶段完成的。你可以通过JavaScript的FileReader API来读取文件信息，包括视频的大小和尺寸。以下是简要步骤：

1. 创建一个事件监听器，当用户选择文件时触发：

<input type="file" @change="handleVideoUpload" />

2. 在`methods`里编写`handleVideoUpload`函数：

methods: {
  handleVideoUpload(e) {
    const file = e.target.files[0];
    if (file.type.startsWith('video/')) {
      const reader = new FileReader();
      reader.onloadend = function () {
        const videoBlob = reader.result;
        const videoType = URL.createObjectURL(videoBlob);
        
        // 使用HTML5 Video API获取视频尺寸
        const video = document.createElement('video');
        video.src = videoType;
        video.addEventListener('canplaythrough', function() {
          const dimensions = { width: video.videoWidth, height: video.videoHeight };
          console.log('Video dimensions:', dimensions);
          // 这里可以做进一步处理，如传递给服务器或显示给用户
          // 或者取消URL创建
          URL.revokeObjectURL(videoType);
        });
      };
      reader.readAsArrayBuffer(file);
    } else {
      alert('Please select a video file.');
    }
  },
},

在这个例子中，我们首先检查文件是否为视频，然后读取其二进制数据到`FileReader`对象中。当文件加载完毕，我们创建一个临时的视频元素，并设置其src属性为从Blob生成的URL。当视频准备好播放时（`canplaythrough`事件），我们可以获取它的宽高。