vue + elementUI Upload 上传视频上传格式尺寸宽高时长,限制视频上传格式、尺寸、时长

在Vue中使用elementUI的Upload组件时，可以通过before-upload钩子函数来实现对视频格式、尺寸和时长的限制。以下是一个简单的示例：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址',
      videoSizeLimit: 1024 * 1024 * 5, // 5MB
      videoWidthLimit: 1920,
      videoHeightLimit: 1080,
      videoTimeLimit: 60, // 60秒
    };
  },
  methods: {
    beforeUpload(file) {
      const isVideo = file.type === 'video/mp4';
      if (!isVideo) {
        this.$message.error('请上传MP4格式的视频文件！');
        return false;
      }
 
      return new Promise((resolve, reject) => {
        const video = document.createElement('video');
        video.preload = 'metadata';
        video.onloadedmetadata = () => {
          window.URL.revokeObjectURL(video.src);
          const width = video.videoWidth;
          const height = video.videoHeight;
          const duration = video.duration;
          if (file.size > this.videoSizeLimit) {
            this.$message.error('视频文件大小不能超过5MB！');
            reject();
            return;
          }
          if (width > this.videoWidthLimit || height > this.videoHeightLimit) {
            this.$message.error('视频的宽度和高度不能超过1920x1080！');
            reject();
            return;
          }
          if (duration > this.videoTimeLimit) {
            this.$message.error('视频时长不能超过60秒！');
            reject();
            return;
          }
          resolve(file);
        };
        video.onerror = () => {
          this.$message.error('视频文件读取失败，请检查视频文件是否损坏！');
          reject();
        };
        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>

在这个示例中，beforeUpload方法会在文件被上传之前调用，并通过创建一个video元素来读取视频的尺寸和时长。如果视频不符合规定的格式、尺寸或时长，它将不被上传。如果视频符合要求，它会返回一个包含文件的Promise，从而允许上传。在handleSuccess和handleError方法中，你可以处理上传成功或失败后的逻辑。