elementui上传视频vue项目想要做一个上传视频的功能，elementui上传视频组件，主要用了elementu

element有个上传组件el-upload

效果图

编辑

组件

<el-upload
    :action="uploadFileUrl"
    :before-upload="beforeUpload"
    :on-success="handleUploadSuccess"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList"
    class="avatar-uploader"
    id="avatar-uploader"
>

js代码

export default{
    data() {
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
    },
    methods {
        beforeUpload(file) {
          const isMp4 = file.type === "video/mp4/webm/mov/flv/ani/wmv/3gp/m4v/mkv";
          // 限制文件最大不能超过 50M
          const isLt50M = file.size / 1024 / 1024 < 50;
          if (!isMp4) {
            this.$message.error("视频只能是mp4格式!");
          }
          if (!isLt50M) {
            this.$message.error("上传头像图片大小不能超过 300MB!");
          }
          return isMp4 && isLt50M;
        },
        // 文件上传成功回调
        handleUploadSuccess(files) {
          console.log("upload success", files,this.fileList);
          if (files.code === 200) {
            const { data } = files;
            this.form.videoUrl = data.url;
          }
        },
        handleExceed(files, fileList) {
            this.$message.warning(
            `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
              files.length + fileList.length
            } 个文件`
            );
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            clearTimeout(this.timer);
            this.$refs.upload.clearFiles();
            this.$alert(response.msg, "导入结果", {
                dangerouslyUseHTMLString: true,
            });
            this.getList();
      
       },
       //图片删除
        handleRemove(file, fileList) {
          this.form.videoUrl = null;
          this.fileList = [];
        },
        beforeRemove(file) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
    }
}