微信小程序实现上传多个文件 超过10个


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了微信小程序实现上传多个文件超过10个的具体代码,供大家参考,具体内容如下

【小程序笔记】wx.uploadFile(OBJECT)

先说说遇到的问题:

小程序可通过wx.uploadFile(OBJECT)接口上传手机文件至服务器,但是在文档中关于请求中有这么一段说明:

request、uploadFile、downloadFile 的最大并发限制是 10 个

意思就是这三个接口请求并发数不能超过10个,否则报以下错误

uploadFile:fail exceed max upload connection count 10

但是业务场景总会需要堆砌一些复杂的功能,比如需要上传多张照片到服务器啊,需要一张一张的上传,等等。

既然不能一下子上传多个文件,那就用最简单的方法完成复杂的功能即可,先上传完一张再上传下一张,哈哈

具体看看主要两个方法:

/**
 * 上传照片//选择图片时限制9张,如需超过9张,同理亦可参照此方法上传多张照片
 */
uploadImg:function(){
 var that = this;
 wx.chooseImage({
 count: 9,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res){
  var successUp = 0; //成功
  var failUp = 0; //失败
  var length = res.tempFilePaths.length; //总数
  var count = 0; //第几张
  that.uploadOneByOne(res.tempFilePaths,successUp,failUp,count,length);
  }, 
 });
},
/**
 * 采用递归的方式上传
 */
 uploadOneByOne(imgPaths,successUp, failUp, count, length){
 var that = this;
 wx.showLoading({
 title: '正在上传第'+count+'张',
 })
 wx.uploadFile({
 url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
 filePath: imgPaths[count],
 name: count,//示例,使用顺序给文件命名
 success:function(e){
 successUp++;//成功+1
 },
 fail:function(e){
 failUp++;//失败+1
 },
 complete:function(e){
 count++;//下一张
 if(count == length){
  //上传完毕,作一下提示
  console.log('上传成功' + successUp + ',' + '失败' + failUp);
  wx.showToast({
  title: '上传成功' + successUp,
  icon: 'success',
  duration: 2000
  })
 }else{
  //递归调用,上传下一张
  that.uploadOneByOne(imgPaths, successUp, failUp, count, length);
  console.log('正在上传第' + count + '张');
 }
 }
 })
 },

注释比较详细,可以看到方法比较简单,示例只做9张图片的上传,可使用for循环调用上传文件的接口,但是在某些特定的场景下,需要考虑可能需要上传多张的需求,可使用此方法一张一张的上传,如果需要控制前一张上传完才能进行下一张的上传,此方法亦非常适用,可以做一些成功和失败的处理,看场景需要而定

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
微信小程序实现同时上传多张图片
Feb 03 #Javascript
解决小程序无法触发SESSION问题
Feb 03 #Javascript
vue组件创建的三种方式小结
Feb 03 #Javascript
Vuex模块化应用实践示例
Feb 03 #Javascript
微信小程序8种数据通信的方式小结
Feb 03 #Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 #Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
jquery 选择器部分整理
2009/10/28 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python实现贪吃蛇游戏
2020/03/21 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
暑期实习鉴定
2013/12/16 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
安全月活动总结
2014/05/05 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
信息简报范文
2015/07/21 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技