el-upload上传视频取视频截图

对于使用 Element UI 的 el-upload 组件来上传视频并获取视频截图，你可以采用以下步骤：

1. 安装依赖：确保你安装了 element-ui 和 video-snapshot 这两个包。

npm install element-ui video-snapshot

2. 引入依赖：在你的项目中引入 element-ui 和 video-snapshot。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VideoSnapshot from 'video-snapshot';

Vue.use(ElementUI);
Vue.prototype.$videoSnapshot = VideoSnapshot;

3. 创建 el-upload 组件：在你的 Vue 组件中，使用 el-upload 组件来上传视频文件。

<template>
  <el-upload
    class="upload-demo"
    action="/your/upload/url"
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :auto-upload="false"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button size="small">上传到服务器</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      // 判断是否为视频文件
      const isVideo = file.type.indexOf('video/') === 0;
      if (!isVideo) {
        this.$message.error('只能上传视频文件');
        return false;
      }
    },
    handleSuccess(response, file) {
      // 视频上传成功后的回调函数
      const video = file.raw; // 获取视频文件对象
      const snapshot = new this.$videoSnapshot(video); // 创建视频截图对象

      snapshot.takeSnapshot((thumbnail) => {
        // 在这里可以处理视频截图 thumbnail，比如展示在页面上
        console.log(thumbnail);
      });
    },
    handleError(error) {
      // 视频上传失败后的回调函数
      console.error(error);
    },
  },
};
</script>

这样，你就可以使用 el-upload 组件上传视频，并在上传成功后获取视频截图了。注意替换 `/your/upload/url` 为你实际的视频上传地址。另外，你可能需要根据你的业务需求，对视频截图进行进一步的处理和展示。