小程序开发之变相实现多图片上传新手教程。。。。。。?⒅凶芑嵝枰募上传的功效(好比图片上传),,,,,微信提供了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!
KESION 金狮贵宾会软件
KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。。KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!
微信小程序的开发,,,,,就是作为一个窗口接口,,,,,来导入流量,,,,,前不久微信小程序作为一个接口又增添了一个新功效,,,,,就是微信小程序wifi一键连,,,,,用户可以通过小程序获取wifi密码。。。。。。...
最新新闻,,,,,沃尔玛自2018年以来与腾讯智慧零售相助以来,,,,,阻止2018年9月初 ,,,,,小程序“扫玛购”用户已累计突破1000万人。。。。。。那么这个扫码购小程序是怎么使用,,,,,怎样吸引到店门客的,,,,,下面小...