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

女爷i 2024-02-05 22:45 42阅读 0赞

基于 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 属性来指定上传接口的地址。