vue+element 上传图片的进度显示

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44314258/article/details/87626360

效果展示

HTML

这里用的是element默认的上传地址action,代码如下

<div>
  <el-upload
    action="https://jsonplaceholder.typicode.com/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:'',  //图片List
    uid:null,    //图片唯一的标识id
  };
},

methods方法

methods:{
  uploadSuccess(response, file, fileList){
    this.uid = 1 //随便一个值,上传成功时,进度条消失
  },
  uploaded(event, file, fileList){
    this.urlList = fileList
    this.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>