el-upload上传视频获取宽高

El-upload是一个基于Element UI的文件上传组件，它支持上传多种类型的文件，包括视频。如果你想在用户上传视频后获取其宽度和高度，你需要在上传成功后的回调函数中处理。你可以通过HTML5的`FileReader` API读取视频数据，并使用`HTMLVideoElement`对象的`naturalWidth`和`naturalHeight`属性来获取原始大小。

以下是一个简单的示例：

import ElUpload from 'element-plus/upload';

// ...

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :auto-upload="false" // 阻止自动上传，手动触发
  >
    <i class="el-icon-upload"></i>
    <div slot="tip">点击选择视频</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(file, response) {
      const fileObj = new Blob([response.data], { type: file.type });
      const videoURL = URL.createObjectURL(fileObj);
      const video = document.createElement('video');
      video.src = videoURL;
      video.addEventListener('loadedmetadata', () => {
        const width = video.videoWidth;
        const height = video.videoHeight;
        console.log('视频宽:', width);
        console.log('视频高:', height);

        // 这里可以将宽高信息保存到数据库或做进一步处理
        this.handleVideoDimensions(width, height);
        URL.revokeObjectURL(videoURL); // 释放URL资源
      });
    },
    handleVideoDimensions(width, height) {
      // ... (在这里处理宽高的业务逻辑)
    },
  },
};
</script>

在这个例子中，当视频上传成功后，我们创建一个`video`元素并设置其src为服务器返回的视频数据，然后监听`loadedmetadata`事件，在这个事件触发时，视频的尺寸已经加载完成，我们就可以获取到它们了。