效果展示
HTML
这里用的是element默认的上传地址action,代码如下
<div><el-uploadaction="/posts/"list-type="picture":show-file-list="false":on-success='uploadSuccess':on-progress='uploaded'><div>上传</div></el-upload><div class="imgList" v-for="(item,index) in urlList" :key="index"><div class="box" v-if="item.uid == uid"><el-progress type="circle" :percentage="Math.round(item.percentage)"></el-progress></div><img v-if="item.percentage == 100" :src="item.url" alt=""></div></div>
data数据
data(){return {urlList:'', //图片Listuid:null, //图片唯一的标识id};},
methods方法
methods:{uploadSuccess(response, file, fileList){this.uid = 1 //随便一个值,上传成功时,进度条消失},uploaded(event, file, fileList){this.urlList = fileListthis.uid = file.uid}}
css样式
<style lang="scss" scoped>.imgList{width: 100px;height: 100px;border:1px dotted #ccc;position:relative;float: left;img{width: 100px;height: 100px;}.box{position:absolute;left:35px;top:25px;}/deep/ .el-progress-circle{width: 30px!important;height: 30px!important;}/deep/ .el-progress__text{top:150%;}}</style>
