【技术贴收集】微信开发 多图片上传接口异常日志

实现微信接口上传图片很简单，但是在IOS多图上传的时候出现异常，最后发现不能用正常的each遍历上传

原帖  http://www.cnblogs.com/codelove/p/5247090.html

复制内容如下：

微信多图片上传必须挨个上传，也就是不能并行，得串行：

那么我们可以定义一个如下所示的上传函数：

var serverIds = [];        function uploadImages(localImagesIds) {            if (localImagesIds.length === 0) {                $.showPreloader('正在提交数据...');                $('form').submit();            }            wx.uploadImage({                localId: localImagesIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得                isShowProgressTips: 1, // 默认为1，显示进度提示                success: function (res) {                    serverIds.push(res.serverId); // 返回图片的服务器端ID                    localImagesIds.shift();                    uploadImages(localImagesIds);                },                fail: function (res) {                    $.alert('上传失败，请重新上传！');                }            });        }

上传函数定义了，那么当点击图片框的时候，需要选择图片，定义如下：

//选择图片            $('#uploadImages img').on('click', function () {                var $img = $(this);                wx.chooseImage({                    count: 1, // 默认9                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有                    success: function (res) {                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片                        //$.alert(localIds[0]);                        $img.attr('src', localIds[0]).addClass('uploaded');                    },                    fail: function (res) {                        alert(JSON.stringify(res));                    }                });            });

当用户选择了所有的图片之后，就需要上传图片了。这里就需要用到我们刚才定义的函数了，具体代码如下所示：

//提交事件            $('#btnSubmit').on('click', function () {                var $chooseImages = $('#uploadImages img.uploaded');                if ($chooseImages.length === 0) {                    $.alert('请上传照片！');                    return;                }                $.showPreloader('正在上传照片...');                var localImagesIds = [];                $chooseImages.each(function () {                    localImagesIds.push($(this).attr('src'));                });                uploadImages(localImagesIds);            });

如上面代码所示，改处调用了函数uploadImages，然后将localImagesIds传递过来了。在uploadImages函数中，使用了递归，但一张图片上传完成后，就会再次调用本身，继续上传下一张图片，请注意以下关键代码：

wx.uploadImage({                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得                isShowProgressTips: 1, // 默认为1，显示进度提示                success: function (res) {                    serverIds.push(res.serverId); // 返回图片的服务器端ID                    localImagesIds.shift();                    uploadImages(localImagesIds);                },                fail: function (res) {                    $.alert('上传失败，请重新上传！');                }            });

这样，一切看起来是OK的，而且Android系统没有任何问题。但是，IOS却无法正常上传，一直会显示加载状态。代码反复检查，木有任何问题，那么肯定是微信的坑了。。。。

历经九九八十一难，终于找到解决办法：

var localId = localImagesIds[0];            //解决IOS无法上传的坑            if (localId.indexOf("wxlocalresource") != -1) {                localId = localId.replace("wxlocalresource", "wxLocalResource");            }

uploadImages全部代码如下所示：

function uploadImages(localImagesIds) {            if (localImagesIds.length === 0) {                $.showPreloader('正在提交数据...');                $('form').submit();            }            var localId = localImagesIds[0];            //解决IOS无法上传的坑            if (localId.indexOf("wxlocalresource") != -1) {                localId = localId.replace("wxlocalresource", "wxLocalResource");            }            wx.uploadImage({                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得                isShowProgressTips: 1, // 默认为1，显示进度提示                success: function (res) {                    serverIds.push(res.serverId); // 返回图片的服务器端ID                    localImagesIds.shift();                    uploadImages(localImagesIds);                },                fail: function (res) {                    $.alert('上传失败，请重新上传！');                }            });        }