微信小程序实现上传多个文件 超过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拖放插件集合
Apr 09 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js中生成map对象的方法
Jan 09 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
javascript中 try catch用法
2015/08/16 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
让python json encode datetime类型
2010/12/28 Python
Python实现处理管道的方法
2015/06/04 Python
python如何统计序列中元素
2020/07/31 Python
python绘制立方体的方法
2018/07/02 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Django 多环境配置详解
2019/05/14 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
python中怎么表示空值
2020/06/19 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
反邪教标语
2014/06/23 职场文书
商务考察邀请函模板
2015/02/02 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书