微信小程序实现上传多个文件 超过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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
js实现表格筛选功能
Jan 18 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
全面解析Vue中的$nextTick
Dec 24 Vue.js
微信小程序实现同时上传多张图片
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中动态显示签名和ip原理
2007/03/28 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2014年宣传工作总结
2014/11/18 职场文书
师德师风事迹材料
2014/12/20 职场文书
电影圆明园观后感
2015/06/03 职场文书
教师节班会主持词
2015/07/06 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang