element-ui el-upload自定义上传文件以及上传进度条的显示

     选取文件
     上传
    

 

自定义上传是通过：http-request指定来实现

注意使用该指令， :on-success, :on-error 指令是不会触发的，action 可以使用普通字符串代替，或者空字符串代替，没有什么意义，但不建议删除。

具体实现详见代码:

data(){
    return{
        percentage:0,
        progress:false
    }
}
methods:{
    upload(param,uname){
    let formdata = new FormData();
    formdata.append('file', param.file);
    formdata.append('uname', 'admin');
    this.$axios.post('fileManager/upload', formdata,{
        headers: {'content-type': 'application/x-www-form-urlencoded'},
        onUploadProgress(progressEvent) {
              if (progressEvent.lengthComputable) {
                   that.progress = true;
                   that.isDisabled=true;
                   let val = (progressEvent.loaded / progressEvent.total *              100).toFixed(0);
                    that.percentage = Number(val);
              }
        }
     }).then((response) => {
       if (response.data.success != undefined) {
               this.$message({
                    message: "文件上传成功！",
                    type: 'success'
               });
                            
               this.$refs.upload.clearFiles()//删除上传文件列表
               this.percentage = 0;
               this.progress = false;
               this.isDisabled=false;
              
          } else {
          this.$message.warning(response.data.error);
          }
    });

}


}