Element-UI框架 —— Upload 上传(视频上传格式和大小判断)

<el-upload
  class="video-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="uploadVideoProcess"
  :before-upload="beforeUploadVideo">
</el-upload>

action：上传地址

on-success：上传成功

before-upload：验证

on-progress：上传进度

验证方法：验证视频格式和视频大小

  beforeUploadVideo(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (['video/mp4', 'video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
        this.$message.error('上传视频只能是 mp4、ogg、flv、avi、wmv、rmvb 格式!');
        return false;
      }
      if (!isLt50M) {
        this.$message.error('上传视频大小不能超过 50MB!');
        return false;
      }
      return true;
    },

上传进度显示：

uploadVideoProcess(event, file, fileList){
    this.videoFlag = true;
    this.videoUploadPercent = file.percentage.toFixed(0);
},

file.percentage获取文件上传进度

<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>