element ui视频上传（已上线，拿去即用）

1.template 部分

• 考虑到有些小伙伴不一定需要进度条，所以顺便说下怎么把它干掉，代码如下：
• 对应的变量和方案也干掉就是了

:on-progress="uploadVideoProcess"

2. script 部分

• 在我的实际业务中，this.rightData是父级组件传过来的值，大家用的时候记得去掉，替换成自己的就成

data() {
    return {
      imageUrl: this.rightData.imageUrl,
      // 视频上传
      uploadImgUrl: `${process.env.VUE_APP_BASE_API}/common-server/aliFile/upLoadVideo`,
      uploadImgData: { busiName: 32 },
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
      menuKey: 1, // 用来强制刷新
      videoFlag: false,  // 进度条相关的
      videoUploadPercent: 0,  // 进度条相关的
    };
  },
  methods: {
    // 上传成功的函数
    handleAvatarSuccess(res, file) {
       // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      ++this.menuKey;
      // console.log(res)
      this.imageUrl = res.data.url;
      // 这里是向父级传值，不需要就去掉
      this.$emit("childRightFn", {
        ...this.rightData,
        ...{ imageUrl: this.imageUrl },
        ...{ props: { src: this.imageUrl } },
      });
    },
    beforeAvatarUpload(file) {
      //   file.type === "image/jpg" ||
      //   file.type === "image/png";
      const isMp4 = file.type === "video/mp4";
      // 限制文件最大不能超过 300M
      const isLt2M = file.size / 1024 / 1024 < 300;

      if (!isMp4) {
        this.$message.error("视频只能是mp4格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 300MB!");
      }
      return isMp4 && isLt2M;
    },

    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    },
 }

• 有个东西重点说一下：menuKey

++this.menuKey;

1. 如果video的src发生变化，预览是不会变化的
2. 所以给此标签加了唯一的key值，每次上传成功key都会变化，让其强制刷新

3. scss 部分

• 这里也请大家按需取用，不需要删掉就是，不要原封不动的搬

• 加了很多注释，相信大家问题不大了，有问题可以加主页的群

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)