微信小程序实现上传多个文件 超过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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
Vue.js中的高级面试题及答案
Jan 13 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python中栈的原理及实现方法示例
2019/11/27 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python如何实现定时器功能
2020/05/28 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Python爬虫与反爬虫大战
2020/07/30 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
车间班组长的职责
2013/12/13 职场文书
教师师德演讲稿
2014/05/06 职场文书
2014年药店工作总结
2014/11/20 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
python如何利用traceback获取详细的异常信息
2021/06/05 Python