运用场景形貌

微信制止了运用表单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));
            }
        });
    }
}