专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
小程序开发之变相实现多图片上传新手教程。开发中总会需要文件上传的功能(比如图片上传),微信提供了wx.uploadFile(OBJECT)方法,用来将文件上传至服务器。
上传图片之前自然需要选择图片,小程序API -- wx.chooseImage(OBJECT)。就是从本地相册选择图片或者使用相机拍照。
OBJECT参数说明如下:
wx.chooseImage({ count: 9, //最多可以选择的图片数,默认为9 sizeType: ['orignal','compressed'], //original 原图,compressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], //album 从相册选图,camera 使用相机,默认二者都有 success: function(){}, //成功则返回图片的本地文件路径列表 tempFilePaths fail: function(){}, //接口调用失败的回调函数 complete: function(){} //接口调用结束的回调函数(调用成功、失败都会执行) })
success返回参数: tempFilePaths: 图片的本地文件路径列表
wx.uploadFile(OBJECT)
wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //开发者服务器 url filePath: tempFilePaths[0],//要上传文件资源的路径 name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 formData:{ //HTTP 请求中其他额外的 form data 'user': 'test' }, success: function(res){ var data = res.data //do something } })
在chooseImage回调函数里调用上传方法!
前久,做了一个如上图的图片上传功能!直接上代码吧:
/* 函数描述:作为上传文件时递归上传的函数体体; * 参数描述: * filePaths是文件路径数组 * successUp是成功上传的个数 * failUp是上传失败的个数 * i是文件路径数组的指标 * length是文件路径数组的长度 */ uploadDIY(filePaths,successUp,failUp,i,length){ var that = this; app.toastShow(0,"图片上传中...",20000000,1); wx.uploadFile({ url: '/uploadurl/', filePath: filePaths[i], name: 'file', formData:{ 'user': 'test' }, success: (res) => { successUp++; var srcArr = that.data.src; srcArr.push(filePaths[i]), that.setData({ src : srcArr }); var data = JSON.parse(res.data); var newpicKeys = that.data.picKeys; newpicKeys.push(data.data['pic_key']); that.setData({ picKeys: newpicKeys }); }, fail: (res) => { that.setData({ isuploaderror: 1 }); failUp ++; }, complete: () => { i ++; if(i == length){ wx.hideToast(); var txt = '总共'+successUp+'张上传成功,'+failUp+'张上传失败!'; app.toastShow(0,txt,2000,1); }else{ //递归调用uploadDIY函数 if(that.data.isuploaderror){ app.toastShow(0,'图片上传失败,请重新选择上传',2000,1); }else{ this.uploadDIY(filePaths,successUp,failUp,i,length); } } } }); }, uploadImage:function(e){ var that = this; that.setData({ isuploaderror: 0 }); var nowLen = that.data.src.length; var remain = 9 - nowLen; wx.chooseImage({ count: remain, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { var successUp = 0; //成功个数 var failUp = 0; //失败个数 var length = res.tempFilePaths.length; //总共个数 var i = 0; //第几个 this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length); }, }); }
因为wx.uploadFile只能单个文件上传,所以需要变相的实现多文件上传,即,complete回调里调用uploadDIY调用函数本身~ 直到i==length!
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
分销裂变是什么 分销裂变模式是一种基于社交关系网络的营销模式,借助互联网社交工具,实现商品或服务的推广与销售增...
分销系统小程序需包含哪些核心模块? 分销系统小程序是借助社交关系链实现产品推广与销售的工具,其核心模块的设计直接...
小程序商城vs微商城,功能、体验的对比 在数字化商业浪潮中,微商城和小程序商城已成为商家开拓线上业务的热门选择。二...
如何从0到1做分销?90%品牌在用的裂变模式 分销,简单说就是品牌或商家通过发展分销者,让他们利用自身资源推广产品,达...
5种常见的小程序类型,看看你适合做哪种 小程序类型商城是一种基于小程序平台的在线购物系统,它让商家能通过小程序为...
分销小程序的6大主流模式推荐 分销小程序,是基于微信小程序开发的电商解决方案,借助微信庞大用户基础,商家将商品推...