微信开发 异步批量上传下载图片

在实现微信多图片上传的时候，我们总会遇到异步请求的问题，由于我们往往不可能在chooseImage的时候就开始上传图片，所以我们需要把localIds和serverId保存下来，但是在wx.chooseImage和uploadImage两个方法中都是异步请求的，我们在success的function中存储数据，然后在ajax外立即又调用了这个数据，则该数据是没有值或为默认值的，因为请求已经提交，不等服务器返回结果就立马往下执行，所以此时的保存的数据肯定不存在

##选择图片
    wx.chooseImage({
 sizeType: ['original','compressed'],// 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album','camera'],// 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
     var localIds_arr = res.localIds; //如果此处用全局变量存储，然后在这个chooseImage结束以后立马调用这个全局变量，就会发现里面是没有值或者是你自己初始化的一个值。因为ajax的请求是异步的，在提交请求成功后还未返回结果就已经开始往下执行，也就意味着，在此处的function中res参数还没有返回值的时候，已经开始往下执行了，而success则做了处理，有值得时候会执行里面的代码，当然我们可以写一个检测函数，检测你定义的全局变量是否有变化，如果有再执行相应代码，但这并不是特别理想的做法。为此我直接在success里面做处理，等有了返回值的时候，将这些内容展示出来（显示图片），如下
     // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

   $.each(localIds_arr,function(i) {      
    $('#picture_show').append("<div class='div_pic' style='display:inline-block;position: relative;' ><img class='delete_picture' src='barcodegen/html/delete.png' style='position: absolute;right: 0;'/><img class='sigle_picture sigle_picture_small' src='"+ localIds_arr[i]+"'/></div>");
//等我需要上传图片的时候，我再通过获取这些图片的SRC属性来上传
   });

  }
});

##上传图片
//上传图片也是如此，我们获取的serverid到底该如何存储并传给后台？如果直接用一个全局变量数组来存储，必然导致该数组第一次传进后台为你定义的初始值，第二次上传（重复上传），才会把第一次请求的值传给后台，这个结果是可以预见的，如果没有每次上传完都把内容清理的话

//我的做法是串行上传，下载

 var current_pic;

mui('body').on('tap','#commit_check',function(){//当点击上传按钮
        var localIds=$('#picture_show .sigle_picture');//获取之前添加的img标签
        var localIds_arr=new Array();
        $.each(localIds,function(i){
            var cur_src=$(this).attr('src');
            localIds_arr.push(cur_src);

        })
if(localIds_arr.length>0)//如果有选择照片,则允许上传
{

uploadToWeixin(localIds_arr);

}

    function uploadToWeixin(arr) {

current_pic=arr.pop();//删除并返回数组最后一个元素
wx.uploadImage({
    localId: current_pic,// 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgresstips: 1,// 默认为1，显示进度提示
    success: function (res) {

      serverId = res.serverId; // 返回图片的服务器端ID,保存下来

      download_pic(serverId);//直接在此处执行下载，把图片从微信服务器上下载下来,每上传一张图片，就下载一张图片，具体下载代码这里就不贴出来了


    }
});

       if(arr.length>0)//如果还有照片则继续上传
{

 uploadToWeixin(arr);//串行上传照片

}

    }

原文地址：https://www.jb51.cc/ajax/161185.html