el-upload上传视频后封面

在使用 Element UI 的 el-upload 组件上传视频后，您可以使用视频的第一帧作为封面。以下是一个示例：

<template>
  <el-upload
    class="upload-demo"
    action="/your-upload-url"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :file-list="fileList"
    :auto-upload="false"
    :limit="1"
    accept="video/*"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleBeforeUpload(file) {
      // 清空 fileList
      this.fileList = [];
      // 获取视频文件的 URL 对象
      const videoUrl = URL.createObjectURL(file);
      
      // 创建 video 元素并加载视频
      const video = document.createElement('video');
      video.src = videoUrl;
      video.currentTime = 0;
      video.muted = true;
      video.addEventListener('loadeddata', () => {
        // 创建 canvas 元素并绘制封面
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        
        // 将 canvas 转换为 data URL，并添加到 fileList 中
        canvas.toBlob((blob) => {
          const coverFile = new File([blob], 'cover.png');
          this.fileList.push(coverFile);
        }, 'image/png');
        
        // 释放资源
        URL.revokeObjectURL(videoUrl);
        video.remove();
      });
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
    }
  }
};
</script>

<style>
.upload-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  border: 1px dashed #ccc;
}
</style>

在上述示例中，我们使用了 Element UI 的 el-upload 组件来进行视频上传。在 `handleBeforeUpload` 方法中，我们获取视频文件的 URL 对象，并创建一个 video 元素加载视频。然后，我们创建一个 canvas 元素，并在其中绘制视频的第一帧作为封面。最后，我们将 canvas 转换为 data URL，并将其作为文件添加到 fileList 中。

请注意，为了确保正确获取视频的第一帧，我们需要监听 video 元素的 `loadeddata` 事件，在视频加载完成后才进行绘制操作。

您可以根据需要自定义样式和上传逻辑。确保将 `/your-upload-url` 替换为您实际的上传接口地址。