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

在实现微信多图片上传的时候,我们总会遇到异步请求的问题,由于我们往往不可能在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("
"
); //等我需要上传图片的时候,我再通过获取这些图片的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);//串行上传照片

}

    }

你可能感兴趣的:(微信开发,php)