在当前的网络时代，视频上传功能已经成为许多应用程序的必备功能。对于用户而言，了解上传进度可以提供更好的用户体验。本文将深入探讨如何在Vue.js中使用Element UI组件库实现视频上传进度显示，帮助开发者轻松掌握这一技术。

一、准备工作

在进行视频上传进度显示之前，我们需要做好以下准备工作：

1. 环境搭建

确保你的项目中已经安装了Vue.js和Element UI。如果没有安装，可以通过以下命令进行安装：

npm install vue element-ui --save
# 或者
yarn add vue element-ui

然后，在项目的主入口文件（通常是main.js或main.ts）中引入Element UI并使用它：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2. 创建Vue组件

接下来，创建一个Vue组件来实现视频上传和显示的功能。我们将使用Element UI的el-upload组件来处理文件上传，并使用video标签来预览视频。

二、实现视频上传

以下是实现视频上传的基本步骤：

1. HTML模板

在Vue组件的模板部分，添加el-upload组件，并配置相应的属性：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="video"
      auto-upload="false"
      :show-file-list="true"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <video :src="videoUrl" controls v-if="videoUrl"></video>
  </div>
</template>

2. JavaScript脚本

在Vue组件的脚本部分，定义相应的属性和方法：

export default {
  data() {
    return {
      uploadUrl: '你的上传接口地址',
      headers: {
        Authorization: 'Bearer ' + '你的token',
      },
      fileList: [],
      videoUrl: '',
    };
  },
  methods: {
    handleSuccess(response, file) {
      // 处理上传成功后的逻辑
      this.videoUrl = URL.createObjectURL(file.raw);
    },
    beforeUpload(file) {
      // 处理文件上传前的逻辑，如文件类型、大小校验等
      const isVideo = file.type.startsWith('video/');
      if (!isVideo) {
        this.$message.error('上传视频文件失败');
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传视频大小不能超过 2MB');
        return false;
      }
      return true;
    },
  },
};

三、显示上传进度

为了显示上传进度，我们需要对el-upload组件的on-progress事件进行处理。以下是一个示例：

methods: {
  handleProgress(event, file, fileList) {
    // 显示上传进度
    this.$message({
      type: 'info',
      message: `上传进度：${Math.round((event.percent || 0))}%`,
    });
  },
},

在模板部分，添加对on-progress事件的监听：

<el-upload
  :action="uploadUrl"
  :headers="headers"
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  :file-list="fileList"
  list-type="video"
  auto-upload="false"
  :show-file-list="true"
  @progress="handleProgress"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

通过以上步骤，你可以在Vue.js中使用Element UI实现视频上传并显示上传进度。这样，用户就可以实时了解上传动态，提高用户体验。