微信JSSDK一次性上傳多張圖片卡死解決方案

應用場景描述

微信禁止了使用表單INPUT[TYPE="FILE"]上傳圖片，必須使用微信WEB JSSDK 圖片上傳，該插件是一張一張的上傳的。過程是這樣的 上傳圖片 ——> 返回圖片本地ID ——>根據圖片本地ID,獲取圖片媒體ID——>服務端根據圖片媒體ID下載圖片。

上傳卡死的緣由

多張連續上傳的時候,由於還未等一張圖片獲取完媒體ID，而下一張圖片又開始請求獲取媒體ID，因此會出現卡死問題。解決方案以下：

• 遞歸處理 （推薦）

• 定時器處理

遞歸處理邏輯思路

定義兩個變量 var idx =0; var localIds; 分別存儲上傳序號,記錄上傳到第幾張圖片，本地圖片ID數組，即調用微信 WEB JSSDK 的wx.chooseImage()返回的結果 寫遞歸函數實現獲取根據圖片本地ID,獲取圖片媒體ID這個環節。

遞歸處理邏輯代碼

// ID數組
var localIds = null;
// 上傳序號
var idx = 0;
var serverIds='';
wx.ready(function(){ //配置web jssdk經過執行
    //調用圖片上傳接口
    wx.chooseImage({//返回本地圖片id 也可作爲img 路徑顯示圖片 
           
          success: function (res) {//上傳本地圖片成功 
           
            localIds = res.localIds;//本地圖片id數組，下標從0開始

            //調用上傳遞歸函數
            wxUploadImg(localIds);
            
          }
    });


    /**
     * [wxUploadImg 獲取圖片媒體ID 遞歸函數]
     * @author 邱先生 
     * @copyright  
     * @version [V1.0版本] 
     * @date 2016-07-02
     * @param  {[type]} localIds [本地圖片ID數組]
     * @return {[type]}          [description]
     */
    function wxUploadImg(localIds){


        wx.uploadImage({//獲取圖片媒體ID
         
            localId: localIds[idx].toString(),  // 須要上傳的圖片的本地ID
            isShowProgressTips: 1, // 默認爲1，顯示進度提示
            success: function (res) {//獲取成功
                // 上傳序號，上傳一張 累計 +1    
                idx++
                //存儲圖片媒體ID，用，號分割
                serverIds+=res.serverId+',';
                
                if(idx<localIds.length){//本地圖片ID 還沒所有獲取完圖片媒體ID
                     //調用上傳遞歸函數
                    wxUploadImg(localIds);
                }else{
                    //上傳序號歸零
                    idx=0;
                    //服務器csrf 驗證字符串，若是後端框架沒開啓csrf，則不須要
                    var csrf=$('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        url: "服務器端根據圖片媒體ID下載圖片處理操做地址",
                        type: 'POST',
                        dataType: 'json',
                        data: {_csrf:csrf,serverIds:serverIds},
                    })
                    .done(function(data) {
                        console.log("上傳成功");
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

                    serverIds='';
                    return true;
                }
            },
            fail: function(res){//獲取多媒體id失敗 返回錯誤代碼
                alert("上傳失敗，msg："+JSON.stringify(res));
            }
        });
    }
}