开发工具:HubilderX +Uni-app
VFP7423+猫框(祺佑三层开发框架)
学完文件上传之后,我们需要做多图上传,我们显示Loading 加载中,一般是这样写的
1 显示 加载中
2 上传文件1
3 上传文件2
4 关闭显示
但是JS是异步的,不是按 2>3>4 这样去执行。一般是4先执行,随后才是2与3,带来一个问题,我们无法很好地给用户提示正在上传中。
现在猫猫给大家一个解决方案:就是利用promise.all来达所有任务执行完成之后,再关闭显示加载中的提示。
01
VFP 猫框后端接收上传代码
Procedure upImage
Local oResult
oResult=GetUpFile() &&返回为集合对象
cFilename=oResult.ofieldcoll.Item("fileData").filename &&文件名 跟上传name(微信)对应 key (mui) 对应
cExtName=Justext(cFilename)
cFilename=Ttoc(Datetime(),1)+Right(Transform(Second()*1000),6)+"."+cExtname
cMydata=oResult.ofieldcoll.Item("fileData").fielddata &&文件内容
Strtofile(cMydata,getwwwrootpath("img\")+cFilename)
TEXT TO lcResult NOSHOW TEXTMERGE PRETEXT 1+2
{"errno":0,"errmsg":"ok","errorMsg":"ok","success":true,"file1":"<<cFilename>>"}
ENDTEXT
Return lcResult
Endproc
02
uni-app代码
uni.chooseImage({
count: 5 ,
success: (res) => {
//开始上传
var task=[]; //建立任务数组
res.tempFilePaths.forEach(function(row,index){
var tmptask=that.upfile2(row);
task.push(tmptask);
})
uni.showLoading({
title:"正在上传"
})
Promise.all(task).then((result) => {
uni.hideLoading() ;
console.log(result)
//方案一:全部成功再显示 方案二:成功一条,显示一条
result.forEach(function(row,index){
that.imageList.push(serverurl+"img/"+row.file1)
})
}).catch((error) => {
uni.hideLoading() ;
uni.showModal({
title:"猫框软件",
content:error,
showCancel:false
})
console.log(error)
})
}
})
upfile2:function(imageSrc){
var that=this;
return new Promise((resolve, reject) => {
uni.uploadFile({
url: serverurl+"ctl_master.fsp?proc=upImage",
name: "fileData",
filePath: imageSrc,
fileType: 'image',
success: (res) => {
if(res.statusCode!=200){
reject("上传失败");
}
var oResult=JSON.parse(res.data);
if(oResult.errno!=0){
reject(oResult.errmsg);
}
//that.imageList.push(serverurl+"img/"+oResult.file1); //上传一条就显示
resolve(oResult);
},
fail: (err) => {
reject(err.errMsg);
}
});
}) //promise
}
03
代码解析:
首先将文件上传代码封装个promise结构。
再建立一个任务数组,将每次执行的上传任务push到数组中
利用promise.all(任务数组).then(执行成功函数).catch(执行失败函数),达到所有任务执行完成之后,执行一段代码的效果。
当所有的任务成功之后,then执行,并传入后端返回的
[{"errno":0,"errmsg":"ok","errorMsg":"ok","success":true,"file1":"文件名"},
{"errno":0,"errmsg":"ok","errorMsg":"ok","success":true,"file1":"文件名"},
]
有几个任务,就有数组就有几行结果
只要有一条失败,就会执行catch的函数
这样就可以很好的加入显示加载中了。
uni-app这样可以用,微信小程序也是可以的,代码稍做调整即可。