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

Lemon_95 發(fā)布于2019-08-19 18:40 / 1684人閱讀

摘要：應(yīng)用場(chǎng)景描述微信禁止了使用表單上傳圖片，必須使用微信圖片上傳，該插件是一張一張的上傳的。上傳卡死的原因多張連續(xù)上傳的時(shí)候因?yàn)檫€未等一張圖片獲取完媒體，而下一張圖片又開(kāi)始請(qǐng)求獲取媒體，所以會(huì)出現(xiàn)卡死問(wèn)題。

應(yīng)用場(chǎng)景描述

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

上傳卡死的原因

多張連續(xù)上傳的時(shí)候,因?yàn)檫€未等一張圖片獲取完媒體ID，而下一張圖片又開(kāi)始請(qǐng)求獲取媒體ID，所以會(huì)出現(xiàn)卡死問(wèn)題。解決方案如下：

遞歸處理 （推薦）

定時(shí)器處理

遞歸處理邏輯思路

定義兩個(gè)變量 var idx =0; var localIds; 分別存儲(chǔ)上傳序號(hào),記錄上傳到第幾張圖片，本地圖片ID數(shù)組，即調(diào)用微信 WEB JSSDK 的wx.chooseImage()返回的結(jié)果  寫(xiě)遞歸函數(shù)實(shí)現(xiàn)獲取根據(jù)圖片本地ID,獲取圖片媒體ID這個(gè)環(huán)節(jié)。

遞歸處理邏輯代碼

// ID數(shù)組
var localIds = null;
// 上傳序號(hào)
var idx = 0;
var serverIds="";
wx.ready(function(){ //配置web jssdk通過(guò)執(zhí)行
    //調(diào)用圖片上傳接口
    wx.chooseImage({//返回本地圖片id 也可做為img 路徑顯示圖片 
           
          success: function (res) {//上傳本地圖片成功 
           
            localIds = res.localIds;//本地圖片id數(shù)組，下標(biāo)從0開(kāi)始

            //調(diào)用上傳遞歸函數(shù)
            wxUploadImg(localIds);
            
          }
    });


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


        wx.uploadImage({//獲取圖片媒體ID
         
            localId: localIds[idx].toString(),  // 需要上傳的圖片的本地ID
            isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
            success: function (res) {//獲取成功
                // 上傳序號(hào)，上傳一張 累計(jì) +1    
                idx++
                //存儲(chǔ)圖片媒體ID，用，號(hào)分割
                serverIds+=res.serverId+",";
                
                if(idx