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;width: 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)
        
      },  

　　

转载于:https://www.cnblogs.com/jessical626/p/7126096.html