上传加上进度条实时

最新推荐文章于 2024-12-04 15:47:35 发布

h～r

最新推荐文章于 2024-12-04 15:47:35 发布

阅读量120

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/huang123rui45/article/details/125784839

版权

本文介绍了如何在Vue.js中使用Element UI组件`el-upload`实现实时上传视频文件，并通过`on-progress`事件动态展示加载进度条。同时，展示了如何控制进度条的显示和关闭，确保用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<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>

data() {
　　loadProgress: 0, // 动态显示进度条
   progressFlag: false, // 关闭进度条
}
 
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) // 一秒后关闭进度条
          }
      },
}