說在前面
最近由于項目需要所以學了下小程序，也做了一些東西，隨后便有了以下的一些總結了，現在說說如何使用小程序一次性上傳多個本地相片。
問題描述
最近做項目的時候要實現一個上傳相片的功能，用了微信提供的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
