el-upload 自定義上傳進度條

1. 圖片樣例，css樣式需要自己調。底部有可復制粘貼的代碼。

<el-upload 
    class="avatar-uploader"
    :action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
　　 accept=".mp4"
    :on-progress="uploadVideoProcess"
  >
    <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- 進度條 -->
<el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
 
 
代碼2：
data() {
　　loadProgress: 0, // 動態顯示進度條
   progressFlag: false, // 關閉進度條
}
 
代碼3: 
methods: {
      uploadVideoProcess(event, file, fileList) {
          this.progressFlag = true; // 顯示進度條
          this.loadProgress = parseInt(event.percent); // 動態獲取文件上傳進度
          if (this.loadProgress >= 100) {
              this.loadProgress = 100
              setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后關閉進度條
          }
      },
}