地址 complete 就是 name func pre files success fun

對於微信小程序上傳圖片其實很麻煩的，每次只能上傳一張，所有很多朋友就會問想要多張圖片上傳怎麽辦?這裏使用遞歸，當上傳完一張圖片後重新執行這個函數，直到所有的圖片都上傳完成後，就不再調用該函數了。具體的實現方法來為大家分享一下。
示例代碼如下：

wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: ‘http://example.weixin.qq.com/upload‘, //僅為示例，非真實的接口地址
filePath: tempFilePaths[0],
name: ‘file‘,

formData:{
‘user‘: ‘test‘
},
success: function(res){
var data = res.data
//do something
}
})
}
})

這裏的示例代碼，是選擇圖片，然後上傳選中的圖片中的第一個圖片;現在開始寫多張圖片上傳的例子，首先，我們還是要選擇圖片：

wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;//這裏是選好的圖片的地址，是一個數組
}
})

然後在app.js中寫一個多張圖片上傳的方法,後面引入，你也可以寫在一個JS文件中，後面引入：

//多張圖片上傳

function uploadimg(data){
var that=this,
i=data.i?data.i:0,//當前上傳的哪張圖片
success=data.success?data.success:0,//上傳成功的個數
fail=data.fail?data.fail:0;//上傳失敗的個數
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: ‘file‘,//這裏根據自己的實際情況改
formData:null,//這裏是上傳圖片時一起上傳的數據
success: (resp) => {
success++;//圖片上傳成功，圖片上傳成功的變量+1
console.log(resp)
console.log(i);
//這裏可能有BUG，失敗也會執行這裏,所以這裏應該是後臺返回過來的狀態碼為成功時，這裏的success才+1
},
fail: (res) => {
fail++;//圖片上傳失敗，圖片上傳失敗的變量+1
console.log(‘fail:‘+i+"fail:"+fail);
},
complete: () => {
console.log(i);
i++;//這個圖片執行完上傳後，開始上傳下一張
if(i==data.path.length){ //當圖片傳完時，停止調用
console.log(‘執行完畢‘);
console.log(‘成功：‘+success+" 失敗："+fail);
}else{//若圖片還沒有傳完，則繼續調用函數
console.log(i);
data.i=i;
data.success=success;
data.fail=fail;
that.uploadimg(data);
}

        }
    });

}
多張圖片上傳的方法寫好了，下面就是引用：
var app=getApp();
Page({
data:{
pics:[]
},
choose:function(){//這裏是選取圖片的方法
var that=this,
pics=this.data.pics;

  wx.chooseImage({
       count: 9-pics.length, // 最多可以選擇的圖片張數，默認9
       sizeType: [‘original‘, ‘compressed‘], // original 原圖，compressed 壓縮圖，默認二者都有
       sourceType: [‘album‘, ‘camera‘], // album 從相冊選圖，camera 使用相機，默認二者都有
       success: function(res){
       var imgsrc=res.tempFilePaths; 

pics=pics.concat(imgsrc);
that.setData({
pics:pics
});
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})

},
uploadimg:function(){//這裏觸發圖片上傳的方法
var pics=this.data.pics;
app.uploadimg({
url:‘https://........‘,//這裏是你圖片上傳的接口
path:pics//這裏是選取的圖片的地址數組
});
},
onLoad:function(options){

}

})
一個簡單的PHP接收代碼：
<?php
$imgname = $_FILES[‘file‘][‘name‘];
$tmp = $_FILES[‘file‘][‘tmp_name‘];
$filepath = ‘now/‘;//記得要自己創建這個文件夾
if(move_uploaded_file($tmp,$filepath.$imgname.".png")){
echo "上傳成功";
}else{
echo "上傳失敗";
}

?>

　　好了，這樣就可以實現在小程序中同時上傳多張圖片的功能啦，是不是感覺非常簡單呢，那麽大家都可以嘗試一下，如果發現問題的話，可以隨時留言咨詢尋求幫助哦。

　　本文由專業的微信小程序開發公司燚軒科技整理發布，原創不易，如需轉載請註明原文作者及出處!

微信小程序實現多張圖片同時上傳的方法