vue 基于 el-upload 封装视频上传组件

基于 Vue 和 Element UI 的 el-upload 组件，我们可以封装一个视频上传组件。以下是一个基本的实现方式：

首先，你需要在你的项目中安装 Element UI 和 vue-upload-component，这两个库可以帮助我们实现视频上传功能。

npm install element-ui vue-upload-component --save

接下来，你可以在你的 Vue 组件中导入 el-upload 和 vue-upload-component，然后创建一个新的视频上传组件。

<template>
  <el-upload
    class="video-upload"
    action=""
    :before-upload="handleBeforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
  </el-upload>
</template>

<script>
import { Upload, Button } from 'element-ui';
import VueUploadComponent from 'vue-upload-component';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  components: { Upload, Button },
  data() {
    return {
      formData: {},
      videoFile: null,
    };
  },
  methods: {
    handleBeforeUpload(file) {
      this.videoFile = file;
    },
    handleSuccess(response, file, fileList) {
      // 这里处理上传成功后的逻辑，例如显示上传成功提示等。
      console.log(response);
    },
    handleError(error, file, fileList) {
      // 这里处理上传失败的逻辑，例如显示上传失败提示等。
      console.log(error);
    },
  },
};
</script>

以上代码中，我们使用了 Element UI 的 el-upload 组件来实现文件上传功能，并使用了 vue-upload-component 来处理上传文件的逻辑。我们通过 before-upload 钩子函数 handleBeforeUpload 来获取上传的文件，并在上传成功后使用 on-success 钩子函数 handleSuccess 来处理上传成功后的逻辑。如果上传失败，我们使用 on-error 钩子函数 handleError 来处理上传失败的逻辑。

请注意，以上代码只是一个基本的实现方式，你可能需要根据自己的需求进行修改和扩展。例如，你可能需要添加文件类型验证、文件大小限制、进度提示等功能。此外，你还需要在组件的父组件中设置 action 属性来指定上传接口的地址。