微信小程序实现上传多个文件 超过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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
比较node.js和Deno
Apr 27 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分页显示制作详细讲解
2008/11/19 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
laravel学习教程之存取器
2016/07/30 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python3图片文件批量重命名处理
2019/10/31 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Python reversed函数及使用方法解析
2020/03/17 Python
iPython pylab模式启动方式
2020/04/24 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
出国签证在职证明
2014/01/16 职场文书
致800米运动员广播稿
2014/02/16 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
毕业典礼致辞
2015/07/29 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
MySQL数据库事务的四大特性
2022/04/20 MySQL