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


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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php远程下载类分享
2016/04/13 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python学习入门细节知识点
2018/03/29 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
代理人委托书
2014/09/16 职场文书
2015年教师节慰问信
2015/03/23 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技