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

新建video-upload.vue文件：

<template>
  <div class="video-upload-com">
    <el-upload :action="uploadUrl" :before-upload="beforeAvatarUpload" :file-list="mediaList" :on-success="handleSuccess" :on-exceed="exceedTips" :limit="1" :on-remove="handleRemove">
      <el-button size="mini" type="primary">点击上传视频</el-button>
      <p v-if="tips" slot="tip" class="el-upload__tip">{
   {
   tips}}</p>
    </el-upload>
    <div v-if="mediaList&&mediaList[0]&&mediaList[0].url">
      <video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls">您的浏览器不支持视频播放</video>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'VideoUpload',
  componentName: 'VideoUpload',
  data () {
   
    return {
   
      mediaUrl: null,
      mediaList: [],
      uploadUrl: null,
      playTime: 0,
      videoSize: 0,
      videoWidth: 0,
      videoHeight