微信小程序实现多张图片上传功能


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序实现多张图片上传的具体代码,供大家参考,具体内容如下

Page({

 /**
  * 页面的初始数据
  */
 data: {
  pics: [],
  count: 9, //上传图片最大数量
  // showImgUrl: "", //路径拼接,一般上传返回的都是文件名,
  uploadImgUrl: 'https://xxx/UploadHandler.ashx', //图片的上传的路径
  detailPics: [], //上传的结果图片集合
 },
 selectimages() {
  var that = this;
  var detailPics = that.data.detailPics;
  if (detailPics.length >= that.data.count) {
   wx.showToast({
    title: '最多选择' + that.data.count + '张!',
   })
   return;
  }
  wx.chooseImage({
   count: that.data.count, // 最多可以选择的图片张数,默认9
   sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
   sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res) {
    var imgs = res.tempFilePaths;
    for (var i = 0; i < imgs.length; i++) {
     that.data.pics.push(imgs[i])
    }
    that.setData({
     pics: that.data.pics
    })
    console.log(that.data.pics)
     that.uploadimg({
     url: that.data.uploadImgUrl, //这里是你图片上传的接口
     path: that.data.pics, //这里是选取的图片的地址数组
    });
   },
  })
 },
 //多张图片上传
 uploadimg: function(data) {
  wx.showLoading({
   title: '上传图片中...',
   mask: true,
  })
  var that = this,
   i = data.i ? data.i : 0,
   success = data.success ? data.success : 0,
   fail = data.fail ? data.fail : 0;
  wx.uploadFile({
   url: data.url,
   filePath: data.path[i],
   name: 'fileData',
   formData: null,
   success: (resp) => {
    wx.hideLoading();
    success++;
    var str = resp.data //返回的结果,可能不同项目结果不一样
    var pic = JSON.parse(str);
    var pic_name = pic.url;
    var detailPics = that.data.detailPics;
    detailPics.push(pic_name)
    that.setData({
     detailPics: detailPics
    })
   },
   fail: (res) => {
    fail++;
    console.log('fail:' + i + "fail:" + fail);
   },
   complete: () => {
    i++;
    if (i == data.path.length) { //当图片传完时,停止调用   
     that.send()
     console.log('执行完毕');
     console.log('成功:' + success + " 失败:" + fail);
     var myEventDetail = {
      picsList: that.data.detailPics
     } // detail对象,提供给事件监听函数
     var myEventOption = {} // 触发事件的选项
     that.triggerEvent('myevent', myEventDetail, myEventOption) //结果返回调用的页面
    } else { //若图片还没有传完,则继续调用函数
     data.i = i;
     data.success = success;
     data.fail = fail;
     that.uploadimg(data); //递归,回调自己
    }
   }
  });
 },
})

效果图:

微信小程序实现多张图片上传功能

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
Javascript函数的参数
Jul 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 #Javascript
微信小程序实现通讯录列表展开收起
Nov 18 #Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 #Javascript
微信小程序实现多行文字滚动
Nov 18 #Javascript
微信小程序实现自定义底部导航
Nov 18 #Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 #Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
php 动态添加记录
2009/03/10 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
js函数调用的方式
2014/05/06 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Javascript this 函数深入详解
2016/12/13 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python单链表原理与实现方法详解
2020/02/22 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python 读取、写入txt文件的示例
2020/09/27 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
小学网上祭英烈活动总结
2014/07/05 职场文书
幼师中班个人总结
2015/02/12 职场文书
小学主题班会教案
2015/08/17 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技