vue 上传单个图片自定义增加progress改良用户体验

时间：2023-12-30 09:26:56
<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="data: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)

      },

　　

相关文章