elementUI实现上传视频时获取视频时长设置大小限制

在使用Element UI的<el-upload>组件实现视频上传时，可以通过监听beforeUpload钩子函数来获取视频文件的时长，并设置上传文件的大小限制。以下是一个简单的示例代码：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    accept="video/*"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传地址',
      maxSize: 1024 * 1024 * 5 // 设置最大限制为5MB
    };
  },
  methods: {
    beforeUpload(file) {
      // 检查文件类型
      if (file.type.split('/')[0] !== 'video') {
        this.$message.error('上传文件类型必须是视频！');
        return false;
      }
 
      // 获取视频时长
      return new Promise((resolve, reject) => {
        const video = document.createElement('video');
        video.preload = 'metadata';
 
        video.onloadedmetadata = () => {
          window.URL.revokeObjectURL(video.src);
          const duration = video.duration;
          if (duration > 10) { // 设置最大时长为10秒
            this.$message.error('上传视频时长不能超过10秒！');
            reject(new Error('视频时长超出限制'));
            return;
          }
          if (file.size > this.maxSize) {
            this.$message.error('上传视频大小不能超过5MB！');
            reject(new Error('视频大小超出限制'));
            return;
          }
          resolve(file);
        };
 
        video.onerror = () => {
          window.URL.revokeObjectURL(video.src);
          this.$message.error('视频文件无法加载！');
          reject(new Error('视频文件无法加载'));
        };
 
        video.src = URL.createObjectURL(file);
      });
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的回调
      console.log('Upload Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      // 上传失败的回调
      console.log('Upload Error:', err, file, fileList);
    }
  }
};
</script>

在这个示例中，我们设置了最大文件大小为5MB，并且检查了视频文件的时长是否超过了10秒钟。如果文件符合条件，它将被上传；否则，将显示错误消息，并且不执行上传。这段代码使用了Promise来处理异步操作，确保在获取视频时长之前不会执行上传。