element ui 上传视频2

 模板部分

<template>
  <div style="display:flex">
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :data="dataObj"
      :with-credentials="true"
      :multiple="false"
      :show-file-list="false"
      :http-request="handleVideoSuccess"
      :on-change="uploadVideoProcess"
      :on-remove="handleRemove"
      :before-upload="beforeUploadVideo"
      :disabled="disabled"
      :on-error="handleError"
    >
      <video
        :src="videoUrl"
        v-if="videoUrl != '' && !videoFlag"
        class="avatar video-avatar"
        controls="controls"
      >您的浏览器不支持视频播放
      </video>
      <i v-else-if="videoUrl == '' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i>
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top: 7px"
      ></el-progress>
    </el-upload>
    <div v-if="videoUrl != '' && !videoFlag" style="margin-left:10px">
      <el-button size="small" type="text" class="btn-delete" @click="handleRemove">删除</el-button>
    </div>
  </div>
</template>

js部分

<script>
import config from "../../utils/config.utils";
import uploadFile from "../../utils/uploadMethod";

export default {
  props: {
    videoUrl: {
      type: String,
      default: ""
    },
    videoTitle: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    itemIndex: {
      type: [String, Number],
      default: -1
    }
  },
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: 0,
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "" //回显的变量
      },
      dataObj: {
        prefixUrl: "certification"
      },
      uploadUrl: ``
    };
  },

  mounted() {
  },

  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      this.handleFileSize(file);
    },

    handleFileSize(file) {
      var fileSize = file.size / 1024 / 1024 < 500; //控制大小  修改50的值即可
      let videoType = true; // 文件类型
      let videoSize = true; /// 文件大小

      // [
      //     "video/mp4",
      //     "video/ogg",
      //     "video/flv",
      //     "video/avi",
      //     "video/wmv",
      //     "video/rmvb",
      //     "video/mov"
      //   ].indexOf(file.type) == -1

      if (["video/mp4"].indexOf(file.type) == -1) {
        //控制格式
        videoType = false;
      }
      if (!fileSize) {
        videoSize = false;
      }
      this.isShowUploadVideo = false;

      return [videoType, videoSize];
    },

    //进度条
    uploadVideoProcess(event, file) {
      let arr = this.handleFileSize(event.raw);
      if (!arr[0]) {
        return;
      }
      if (!arr[1]) {
        return;
      }

      if (event.status === "ready") {
        this.videoFlag = true; //进度条显示
        const interval = setInterval(() => {
          if (this.videoUploadPercent >= 100) {
            clearInterval(interval);
            return;
          }
          this.videoUploadPercent += 1; //进度条进度
        }, 80);
      }
    },

    handleError(e) {
      console.log(e, "error");
    },

    //上传成功回调
    handleVideoSuccess(params) {
      let arr = this.handleFileSize(params.file);
      if (!arr[0]) {
        this.$message.error("请上传正确的视频格式");
        return;
      }
      if (!arr[1]) {
        this.$message.error("视频大小不能超过500MB");
        return;
      }

      uploadFile(params).then(res => {
        this.isShowUploadVideo = true;
        this.videoFlag = false;
        this.videoUploadPercent = 100;
        if (res.code === 200) {
          this.emitInput(res.data)
        }
      });
    },
    emitInput(val) {
      this.videoUploadPercent = 0;
      this.$emit("upload-res", val, this.itemIndex);
    },
    handleRemove() {
      this.$emit("delete-video");
    }
  }
};
</script>

样式部分

<style lang="scss" scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>

效果部分