微信小程序实现上传多个文件 超过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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
JS实现简易日历效果
Jan 25 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异常类及异常处理操作实例详解
2018/12/19 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
JS实现简易计算器
2020/02/14 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
优秀员工自荐书
2013/12/19 职场文书
保健品市场营销方案
2014/03/31 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
中层干部考核评语
2015/01/04 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
人与自然观后感
2015/06/16 职场文书
企业宣传稿范文
2015/07/23 职场文书
职工宿舍管理制度
2015/08/05 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python