前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-app+猫框多图异步上传与显示loading的解决方案

uni-app+猫框多图异步上传与显示loading的解决方案

作者头像
加菲猫的VFP
发布2021-08-16 14:50:25
1.4K0
发布2021-08-16 14:50:25
举报
文章被收录于专栏:加菲猫的VFP

开发工具:HubilderX +Uni-app

VFP7423+猫框(祺佑三层开发框架)

学完文件上传之后,我们需要做多图上传,我们显示Loading 加载中,一般是这样写的

1 显示 加载中

2 上传文件1

3 上传文件2

4 关闭显示

但是JS是异步的,不是按 2>3>4 这样去执行。一般是4先执行,随后才是2与3,带来一个问题,我们无法很好地给用户提示正在上传中。

现在猫猫给大家一个解决方案:就是利用promise.all来达所有任务执行完成之后,再关闭显示加载中的提示。

01

VFP 猫框后端接收上传代码

代码语言:javascript
复制
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代码

代码语言:javascript
复制
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执行,并传入后端返回的

代码语言:javascript
复制
[{"errno":0,"errmsg":"ok","errorMsg":"ok","success":true,"file1":"文件名"},
{"errno":0,"errmsg":"ok","errorMsg":"ok","success":true,"file1":"文件名"},
]

有几个任务,就有数组就有几行结果

只要有一条失败,就会执行catch的函数

这样就可以很好的加入显示加载中了。

uni-app这样可以用,微信小程序也是可以的,代码稍做调整即可。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-01-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 加菲猫的VFP 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档