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


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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JavaScript实现星级评分
Jan 12 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
vue实现分页加载效果
Dec 24 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
对vuex中store和$store的区别说明
Jul 24 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中GET变量的使用
2006/10/09 PHP
通过文字传递创建的图形按钮
2006/10/09 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
基于python实现操作git过程代码解析
2020/07/27 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
幼师求职自荐信范文
2014/01/26 职场文书
运动会广播稿150字
2014/02/19 职场文书
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技