微信小程序实现上传多个文件 超过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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
vue ref如何获取子组件属性值
Mar 31 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制作静态网站的模板框架(二)
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
JavaScript基础心法 数据类型
2018/03/05 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python 数据结构之旋转链表
2017/02/25 Python
python图形用户接口实例详解
2019/12/16 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
初三学习决心书
2014/03/11 职场文书
工程质量承诺书范文
2014/03/27 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
中国梦读书活动总结
2014/07/10 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
付款证明模板
2015/06/19 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js