el-upload上传,进度条
2023-01-12 本文已影响0人
lvyweb
el-upload上传,不立即上传,点击确定的时候上传的时候进度条
html部分
<div class="file-handle">
<el-upload ref="uploadFile" action="#"
:auto-upload="false"
:file-list="createShowData.fileList"
accept=".pdf"
:on-change="fileChange">
<div class="file-text">
<el-button type="primary" v-auto-blur>读取文件</el-button>
</div>
</el-upload>
<el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
</div>
js部分
let formData = new FormData();
formData.append("reportName", this.createShowData.reportName);
formData.append("description", this.createShowData.description);
axios({
method: "POST",
headers: { "Content-Type": "multipart/form-data" },
url: '请求地址',
data: formData,
onUploadProgress:((node)=>{
let tempProgress = node.loaded/node.total; //上传进度
this.progressFlag = true;
this.loadProgress = parseInt(tempProgress *100 ) ;
if(tempProgress == 1){
this.progressFlag = false;
this.closeDialog();
this.isFormLoading = false;
}
})
}).then((res) => {
this.uploadSuccess(res);
}).catch((res)=>{
this.$layer.message(res || "失败",'error')
});