加载中…[LayUI][文件上传]上传文件并实时同步处理进度
(2019-03-15 07:35:11)
标签：
golanglayui前后端交互进度条 |
分类： 运维开发日志 |
大体思路如下：
前端：选择文件-重置进度条为0%-上传文件-后端接收成功-启动定时器周期查询进度并更新进度条-进度为100时结束定时器
后端-文件接收：接收到文件-判断是否有同样的任务在执行-文件有效-正常返回并启动文件处理协程
后端-进度查询：查询Redis的指定Key，获取进度值并返回；Key不存在时直接返回100；
后端-协程处理：向Redis设置标记位表示任务执行中-开始处理文件并实时更新Redis的进度值(当前计数/总数*100）-任务完成后删除Redis的Key值
前端代码：
var uploadInst = upload.render({
elem: '#LAY-import', //绑定元素
url: PostParam.PostUrl, //上传接口
data: {
postAction: 'ajaxImport',
postTicket: PostParam.Ticket
},
method:'post',
auto: true,
exts: 'xlsx',
accept: 'file',
before: function(obj){
element.progress('progress-import', '0%')
},
done: function (res) {
//上传完毕回调
//console.log(res);
if (res.code==0){
var DISABLED = 'layui-btn-disabled';
$('#LAY-import').addClass(DISABLED);
$('#LAY-import').attr('disabled',"true");
var timer=setInterval(function(){
$.ajax({
url: PostParam.PostUrl,
async: false,
type: 'POST',
data: {
postAction: 'ajaxImportProgress'
},
timeout: 1000,
cache: false,
success: function (res) {
//console.log(res);
if (res.code == 0) {
element.progress('progress-import', res.data+'%');
if (res.data==100){
clearInterval(timer);
$('#LAY-import').removeClass(DISABLED);
$('#LAY-import').removeAttr("disabled");
}
}
}
});
},2000);
}else{
layer.;
}
},
error: function () {
//请求异常回调
}
});
喜欢
0
赠金笔