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

<el-upload
     class="upload-demo"
     ref="upload"
     action=""
     :http-request="Upload"
     enctype="multipart/form-data"
     :on-preview="handlePreview"
     :on-remove="handleRemove"
     :file-list="fileList"
     :limit="1"
     :on-exceed="handleExceed"
     :auto-upload="false">
     <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     <el-button style="margin-left: 10px;" size="small" type="success"@click="submitUpload"                 :disabled="isDisabled">上传</el-button>
    <el-progress :percentage="percentage"  :text-inside="true" :stroke-width="18" v-show="progress" status="success" style="margin-top:5px;"></el-progress>
</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);
          }
    });

}


}