首页 > 其他分享 >vue上传文件显示进度条,当上传完成后间隔一秒进度条消失

vue上传文件显示进度条,当上传完成后间隔一秒进度条消失

时间:2023-04-13 16:57:27浏览次数:40  
标签:vue 进度条 fileList uploadProgress file 上传 event

<template>
    <el-upload
      class="avatar-uploader"
      action="api/file/upload"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-progress="handleUploadProgress"
      :on-success="handleAvatarSuccess"
      ref="upload"
    >
      <el-button slot="trigger">Upload File</el-button>
      <div v-if="uploadProgress > 0">
        <el-progress :percentage="uploadProgress"></el-progress>
      </div>
    </el-upload>
  </template>
  
  <script>
  export default {
    data() {
      return {
        uploadProgress: 0,
      };
    },
    methods: {
      beforeAvatarUpload(file) {
        // do some validation on the file
      },
      handleUploadProgress(event, file, fileList) {
        this.uploadProgress = event.percent;
      },
      handleAvatarSuccess(response, file, fileList) {
        this.uploadProgress = 100;
        setTimeout(() => {
          this.uploadProgress = 0;
        }, 1000);
      },
    },
  };
  </script>

 

标签:vue,进度条,fileList,uploadProgress,file,上传,event
From: https://www.cnblogs.com/xbinbin/p/17315390.html

相关文章

  • Vuex
    1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信2.何时使用?多个组件需要共享数据时3.搭建vuex环境创建文件:src/store/index.js//引入vue......
  • Vue样式组件库
    常用样式库常用的Vue样式库如下组件库说明地址element目前只支持到vue2.x版本,不再更新https://element.eleme.cn/#/zh-CNelement-plus样式与element相同,开发都为了在vue3.x版本中使用而升级https://element-plus.gitee.io/zh-CN/vans主要针对移动端的UI......
  • Vue之插件的使用
    目录作用使用定义全局变量作用vue的插件的作用就是为了增强Vue,比如router,比如Vuex本质就是包含install方法的一个对象,install的第一个参数是vue,第二个及之后的参数是使用都要传递的数据,插件对象中的install方法会被vue自动调用。使用在Vue项目的src目录中创建目录plugi......
  • 在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework
    Vue3的UIFramework中有Element-Plus、BalmUI、Quasar、PrimeVue、AntDesignVue等UIFramework.Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较多,就选择了Element-Plus作为这个Blog项目的UIFramework.UIFramework的好处就是提供了......
  • 使用vue ui命令创建vue项目
    使用vueui创建项目时的几个选项1、什么是vueuivue3相比vue2多了一个创建项目的方式,那就是使用vueui的命令方式创建项目。vueui的实质就是使用vue官方图形化项目管理工具2、如何使用vueui创建vue项目或者直接选择第二个使用vue3的默认选项,我在这里介绍手动配置2.1......
  • vue中通过事件获取元素的值
    vue中通过事件获取元素的值原生js获取值<template><div><ul><li>姓名:<inputtype="text"id="name"/></li></ul><button@click="doSubmit()"class="submit">获取表单的......
  • 用quasar+vue3+组合式api VueRouter实现路由嵌套(二级路由)
    前言:本项目使用的是quasar创建,vue3的组合式api语法。部分语法不同,但不影响理解,修改语法后可以在vue2/选项式api项目中运行。效果图:文件目录结构和代码如下:   文中用到的标题栏数据如下:consttitles=ref([{name:"首页",path:"home",children:[]},{......
  • CKEditor粘贴图片自动上传到服务器(VUE版)
    ​ 由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解......
  • Vuex笔记
    Vuex有state,mutation,actions,getter四种用法如下:1、state(存储数据):state{count:0//全局数据}获取state数据两种方式:this.$store.state.全局数据名称利用辅助函数mapstateImport{mapState}from“vuex”computed:{…mapstate([“全局数据名称”])}2、mutation(更......
  • vue长按事件指令(v-longPress)
    importtype{Directive,App}from'vue';constlongPress:Directive={beforeMount:function(el,binding,vnode,prevVnode){if(typeofbinding.value!=='function'){throw'callbackmustbeafunction';......