微信小程序实现上传多个文件 超过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 相关文章推荐
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
vue component组件使用方法详解
Jul 14 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
js利用iframe实现选项卡效果
Aug 09 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python帮你识破双11的套路
2019/11/11 Python
python与js主要区别点总结
2020/09/13 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
学习党课思想汇报
2013/12/29 职场文书
上课睡觉检讨书
2014/01/28 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
2015年女生节活动总结
2015/02/27 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android