目錄
基于el-upload組件實現(xiàn)進度條的編寫
后臺進度前臺進度條顯示
基于el-upload組件實現(xiàn)進度條的編寫
①編寫文件上傳時的鉤子函數(shù)
uploadProgress(event,file,fileList){
let _self = this;
if(event.lengthComputable){
let val = (event.loaded / event.total * 100 ).toFixed(0);
var progress = parseInt(val);
_self.percentage = progress;
}
},②監(jiān)聽進度百分比
后臺進度前臺進度條顯示
參考文章：后臺進度前臺顯示進度條_weixin_30646505的博客-CSDN博客
后端思路：
①創(chuàng)建一個類，封裝進度變量
?
②創(chuàng)建一個全局map，用于存放不同用戶的進度數(shù)據(jù)，key為用戶的id(一定唯一)，value即為進度條的實際進度
private Map<Long,Percentage> map=new HashMap<>();③主方法執(zhí)行操作，每完成一步操作即進度加一
④輔助方法返回當前操作的進度
前端思路：?
①主請求請求操作
② 輔助請求為定時任務(wù)，每隔一段時間去請求操作的進度文章來源：http://www.zghlxwxcb.cn/news/detail-403028.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-403028.html
var proNum = setInterval(function(){
me.$http({
url: me.$http. adornUrl(`/bim/ifcdata/parse/percentage/${id}`),
method: 'get',
params: me.$http.adornParams({})
}).then(({data})=>{
if(data.msg == "success"){
var prog = data.data;
console.log("num => "+prog);
me.percentage = Math.round(( prog / me.total) * 100, 2);
console.log("percentage =>"+ me.percentage);
if(me.percentage == 100){
proNum="";
}
}
})
},3000);到了這里，關(guān)于基于vue+element-ui實現(xiàn)上傳進度條的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
