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

效果展示

HTML

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

  
    
上传
  
  

    

      
    
    
  

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样式