微信JSSDK多圖片上傳而且解決IOS系統上傳一直加載的問題

微信多圖片上傳必須挨個上傳，也就是不能並行，得串行：

那麼咱們能夠定義一個以下所示的上傳函數：

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); // 返回圖片的服務器端ID
                    localImagesIds.shift();
                    uploadImages(localImagesIds);
                },
                fail: function (res) {
                    $.alert('上傳失敗，請從新上傳！');
                }
            });
        }

上傳函數定義了，那麼當點擊圖片框的時候，須要選擇圖片，定義以下：

//選擇圖片
            $('#uploadImages img').on('click', function () {
                var $img = $(this);
                wx.chooseImage({
                    count: 1, // 默認9
                    sizeType: ['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); // 返回圖片的服務器端ID
                    localImagesIds.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); // 返回圖片的服務器端ID
                    localImagesIds.shift();
                    uploadImages(localImagesIds);
                },
                fail: function (res) {
                    $.alert('上傳失敗，請從新上傳！');
                }
            });
        }