zoukankan      html  css  js  c++  java
  • vue 上传单个图片自定义增加progress改良用户体验

    <el-tab-pane label="开发商logo" name="first" style="position: relative;">
        	<el-upload
    		  class="avatar-uploader"
    		  action="https://jsonplaceholder.typicode.com/posts/"		 
    		  :show-file-list="false"
    		  :on-success="handleAvatarSuccess"	
    		  :on-error="handleAvatarError"
    		  :on-remove="handleRemove"		  
    		  :on-progress="handleProgress"
    		  :before-upload="beforeAvatarUpload">
    		  <img v-if="imageUrl" :src="imageUrl" class="avatar">
    		  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    		  <p style="position: absolute;bottom: 0;background: rgba(0,0,0,.3);color:#fff; 100%;margin: 0;padding: 5px;">点击上传图片</p>
    		  <el-progress v-show="showFlag" type="circle" :percentage="progressing" :status="status" style="position: absolute;top:10%;left:15%;" ></el-progress>		</el-upload>
        </el-tab-pane>
    

      

     handleProgress(){   
           	var _this = this;
           	clearInterval(this.time);
           	this.time = setInterval(function(){      		
           		if(_this.progressing<100){
           			_this.progressing += 10;//进程条
           		}else{      			
           		}       	
            },500)
           },
        	handleAvatarError(){
        	clearInterval(this.time);
        	this.status = 'exception';
        	 this.$message.error('上传图片失败!');
        	},
           handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);        
            this.progressing = 100;
            clearInterval(this.time)
            this.status = 'success';//进程状态
            var _this = this;
            setTimeout(function(){
            	 _this.showFlag = false;
            },2000)
            
          },  
    

      

  • 相关阅读:
    Spring 整合Mybatis
    Spring 配置说明
    AutoCAD.Net/C#.Net QQ群:193522571 虚拟方法的使用
    VLAN帧格式详解
    内网安全体系建设工作思路
    IT公司常见的内网漏洞表格
    内网安全运营的逻辑体系架构
    域安全的基础知识
    利用DNS日志进行MySQL盲注
    Linux内存凭据提取mimipenguin
  • 原文地址:https://www.cnblogs.com/jessical626/p/7126096.html
Copyright © 2011-2022 走看看