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)
            
          },  
    

      

  • 相关阅读:
    [WC2010]重建计划
    [Codeforces150E] Freezing with Style
    [Codeforces915F] Imbalance Value of a Tree
    [Codeforces1055F] Tree and XOR
    [Codeforces1117G]Recursive Queries
    [Codeforces587F]Duff is Mad
    [Codeforces547E]Mike and Friends
    [2020团体程序设计天梯赛-总决赛L3-2] 传送门
    第05组 Beta冲刺 (1/5)
    第05组 Alpha冲刺 总结
  • 原文地址:https://www.cnblogs.com/jessical626/p/7126096.html
Copyright © 2011-2022 走看看