这篇文章主要介绍“小程序怎么实现多图片上传”,在日常操作中,相信很多人在小程序怎么实现多图片上传问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现多图片上传”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
小程序开发之变相实现多图片上传新手教程。开发中总会需要文件上传的功能(比如图片上传),微信提供了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!
到此,关于“小程序怎么实现多图片上传”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。