微信小程序实现上传多个文件 超过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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 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实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python破解zip加密文件的方法
2018/05/31 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python 实现return返回多个值
2019/11/19 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
给领导敬酒词
2015/08/12 职场文书
大学生干部培训心得体会
2016/01/06 职场文书