说在前面
最近由于项目需要所以学了下小程序，也做了一些东西，随后便有了以下的一些总结了，现在说说如何使用小程序一次性上传多个本地相片。
问题描述
最近做项目的时候要实现一个上传相片的功能，用了微信提供的api之后发觉很容易就做出来了，在pc端调试也没有弊端，但是等到我用真机调试的时候就发现出问题了，问题就是在真机调试的时候无法一次性上传多张图片。
老规矩，以源码为导向
photos.js
//部分参数我就不抽出了，关键是看实现机制
var app = getApp();
var baseUrl = app.baseUrl;
//上传图片的路径
var uploadUrl = baseUrl+'pictureController/insertPic';
var array = [];
var owerId = '33aef7e0ac1b11e6af9f142d27fd7e9e';
var albumId;
var pageSize = 9;
var currentPage = 1;
var cryUrl = app.cryUrl;
Page({
data: {
hasMore:false,
cryUrl:cryUrl,
clientHeight:0,
// 图片布局列表（二维数组，由`albumList`计算而得）
layoutList: [],
// 布局列数
layoutColumnSize: 3,
// 是否显示loading
showLoading: false,
// loading提示语
loadingMessage: '',
// 是否显示toast
showToast: false,
// 提示消息
toastMessage: '',
// 是否显示动作命令
showActionsSheet: false,
// 当前操作的图片
imageInAction: '',
// 图片预览模式
previewMode: false,
// 当前预览索引
previewIndex: 0,
images_upload: '../resources/images/camera.png',
imageBaseUrl : baseUrl+"pictures/"
},
/* 函数描述：作为上传文件时递归上传的函数体体；
* 参数描述：
* filePaths是文件路径数组
* successUp是成功上传的个数
* failUp是上传失败的个数
* i是文件路径数组的指标
* length是文件路径数组的长度
*/
uploadDIY(filePaths,successUp,failUp,i,length){
wx.uploadFile({
url: uploadUrl,
filePath: filePaths[i],
name: 'fileData',
formData:{
'pictureUid': owerId,
'pictureAid': albumId
},
success: (resp) => {
successUp++;
},
fail: (res) => {
failUp ++;
},
complete: () => {
i ++;
if(i == length)
{
this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败！');
}
else
{ //递归调用uploadDIY函数
this.uploadDIY(filePaths,successUp,failUp,i,length);
}
},
});
},
uploadImage:function(e){
wx.chooseImage({
count: 9,
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);
},
});
}
})
那么如何使用呢？
修改了uploadUrl之后，直接调用 uploadImage 函数即可。
我使用用递归的方式来多次上传选中的图片的原因？
小程序的官方文档有提到， wx.uploadFile一次只能上传一张图片，而我用了for循环多次上传的在pc端调试可以上传多张成功，但是在真机调试的时候却还是只能上传一张，于是我便投机在上传成功之后再次调取wx.uploadFile进行上传，结果成功了，为了代码整洁我便用了递归的方式进行调用。
Note:发布的这些文章全都是自己边学边总结的，难免有纰漏，如果发现有不足的地方，希望可以指出来，一起学习咯，么么哒。
开源爱好者，相信开源的力量必将改变世界:
** osc :** https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub
