vue使用element上传视频功能(上传前进行判断，自定义上传)

vue使用element上传功能(上传前进行判断，自定义上传)

2020/12/14

<div v-if="detail.video == 1">
    
    <el-upload
       class="upload-demo"
       action="上传地址(自定义上传非必须)"
       :auto-upload="false"
       :limit="1"
       :file-list="fileListc"
       :on-change="handleChangec"
       :show-file-list="false"
    >
       <el-button size="small" type="primary">普通视频上传el-button>
    el-upload>
div>

data() {
  return {
     fileListc: [], //上传的普通视频文件列表
  }
},
methods: {
    // 普通视频上传发生变化触发
    handleChangec(file, fileList) {
      let self = this;
      self.filrnei = file;
      const isVideo = file.raw.type == "video/mp4" || file.raw.type == "video/webm";
      const isLt25M = file.size / 1024 / 1024 < 25;
      if (!isVideo) {
        self.$message.error("只能上传符合格式的视频!");
        self.fileListc = [];
        return;
      }
      if (!isLt25M) {
        self.$message.error("上传普通视频大小不能超过25M!");
        self.fileListc = [];
        return;
      }
      let hsk = file;
      let URL = window.URL || window.webkitURL;
      // 获取分辨率，需要先生成预览url再创建video对象
      const video = document.createElement("video");
      self.kkls = URL.createObjectURL(hsk.raw);
      video.src = self.kkls;
      video.addEventListener("canplay", function () {
        if (this.videoWidth > 1920 || this.videoHeight > 1080) {
          self.$message.error("上传视频分辨率最大1080p");
          self.fileListc = [];
          return;
        }
        self.$router.replace({
          name: "Edit",
          params: {
            leixs: 3,
            filrnei: self.filrnei,
          },
        });
      });
    },
}