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>