微信小程序实现上传多个文件 超过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 相关文章推荐
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
JS实现复制功能
Mar 01 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
基于Cesium绘制抛物弧线
Nov 18 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/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python如何对实例属性进行类型检查
2018/03/20 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
银行演讲稿范文
2014/01/03 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
诚信考试主题班会
2015/08/17 职场文书
python实现简单的井字棋
2021/05/26 Python