微信小程序实现上传多个文件 超过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插件分享
May 22 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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编程网上资源导航
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
pytorch SENet实现案例
2020/06/24 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
2014的自我评价
2014/01/13 职场文书
银行竞聘报告范文
2014/11/06 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
情况说明书格式及范文
2019/06/24 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL