微信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));
            }
        });
    }
}