element-ui el-upload 上传 进度状态展示 进度条

大文件上传的时候想要展示文件上传进度(百分比)。

element-ui el-upload 上传 进度状态展示 进度条_第1张图片

element-ui el-upload 上传 进度状态展示 进度条_第2张图片

 


    



 
 
代码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) // 一秒后关闭进度条
          }
      },
}

你可能感兴趣的:(vue.js,前端,javascript)