elementUI el-upload上传前端获取视频时长

在使用Element UI的<el-upload>组件获取上传视频的时长时，可以利用HTML5的<video>标签和FileReader API来实现。以下是一个简单的示例：

<template>
  <el-upload
    :on-change="handleChange"
    :before-upload="beforeUpload"
    action="#">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 当文件列表发生变化时调用
      // 这里可以处理你的业务逻辑，例如更新UI显示视频时长等
    },
    beforeUpload(file) {
      // 上传前的钩子，返回 false 或 Promise 可停止上传
      const video = document.createElement('video');
      video.preload = 'metadata';
 
      // 设置视频源
      video.src = URL.createObjectURL(file);
      // 等待视频元数据加载完成
      video.onloadedmetadata = () => {
        // 获取视频时长
        const duration = video.duration;
        console.log('视频时长（秒）:', duration);
 
        // 做其他的业务逻辑处理
        // ...
      };
 
      return false; // 阻止默认上传行为
    }
  }
};
</script>

在这个示例中，我们创建了一个<video>元素，通过它的src属性加载上传的文件。我们监听loadedmetadata事件，该事件在视频的元数据（如时长、尺寸）加载完成时触发。在事件处理函数中，我们可以获取视频的时长，并执行后续的业务逻辑。通过返回false在<el-upload>的before-upload钩子中阻止文件的默认上传行为。