微信多圖片上傳必須挨個上傳,也就是不能并行,得串行:
那么我們可以定義一個如下所示的上傳函數:
var serverIds = [];function uploadImages(localImagesIds) {if (localImagesIds.length === 0) {$.showPreloader('正在提交數據...');$('form').submit();}wx.uploadImage({localId: localImagesIds[0], // 需要上傳的圖片的本地ID,由chooseImage接口獲得isShowProgressTips: 1, // 默認為1,顯示進度提示success: function (res) {serverIds.push(res.serverId); // 返回圖片的服務器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上傳失敗,請重新上傳!');}});}
上傳函數定義了,那么當點擊圖片框的時候,需要選擇圖片,定義如下:
//選擇圖片$('#uploadImages img').on('click', function () {var $img = $(this);wx.chooseImage({count: 1, // 默認9sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有success: function (res) {var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標簽的src屬性顯示圖片//$.alert(localIds[0]);$img.attr('src', localIds[0]).addClass('uploaded');},fail: function (res) {alert(JSON.stringify(res));}});});
當用戶選擇了所有的圖片之后,就需要上傳圖片了。這里就需要用到我們剛才定義的函數了,具體代碼如下所示:
//提交事件$('#btnSubmit').on('click', function () {var $chooseImages = $('#uploadImages img.uploaded');if ($chooseImages.length === 0) {$.alert('請上傳照片!');return;}$.showPreloader('正在上傳照片...');var localImagesIds = [];$chooseImages.each(function () {localImagesIds.push($(this).attr('src'));});uploadImages(localImagesIds);});
如上面代碼所示,改處調用了函數uploadImages,然后將localImagesIds傳遞過來了。在uploadImages函數中,使用了遞歸,但一張圖片上傳完成后,就會再次調用本身,繼續上傳下一張圖片,請注意以下關鍵代碼:
wx.uploadImage({localId: localId, // 需要上傳的圖片的本地ID,由chooseImage接口獲得isShowProgressTips: 1, // 默認為1,顯示進度提示success: function (res) {serverIds.push(res.serverId); // 返回圖片的服務器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上傳失敗,請重新上傳!');}});
這樣,一切看起來是OK的,而且Android系統沒有任何問題。但是,IOS卻無法正常上傳,一直會顯示加載狀態。代碼反復檢查,木有任何問題,那么肯定是微信的坑了。。。。
歷經九九八十一難,終于找到解決辦法:
var localId = localImagesIds[0];//解決IOS無法上傳的坑if (localId.indexOf("wxlocalresource") != -1) {localId = localId.replace("wxlocalresource", "wxLocalResource");}
uploadImages全部代碼如下所示:
function uploadImages(localImagesIds) {if (localImagesIds.length === 0) {$.showPreloader('正在提交數據...');$('form').submit();}var localId = localImagesIds[0];//解決IOS無法上傳的坑if (localId.indexOf("wxlocalresource") != -1) {localId = localId.replace("wxlocalresource", "wxLocalResource");}wx.uploadImage({localId: localId, // 需要上傳的圖片的本地ID,由chooseImage接口獲得isShowProgressTips: 1, // 默認為1,顯示進度提示success: function (res) {serverIds.push(res.serverId); // 返回圖片的服務器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上傳失敗,請重新上傳!');}});}
以上所述是針對微信JSSDK多圖片上傳并且解決IOS系統上傳一直加載的問題的相關介紹,希望對大家有所幫助!
新聞熱點
疑難解答