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