微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

简介: 微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.

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

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

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('上传失败,请重新上传!');
                }
            });
        }
目录
相关文章
|
1天前
|
iOS开发
ipa文件安装到ios系统
ipa文件安装到ios系统
5 0
|
30天前
|
人工智能 小程序 前端开发
微信小程序|SSM微信小程序的学生选课系统(二)
微信小程序|SSM微信小程序的学生选课系统
|
30天前
|
小程序 Java 应用服务中间件
微信小程序|SSM微信小程序的学生选课系统(一)
微信小程序|SSM微信小程序的学生选课系统
|
1月前
|
小程序 前端开发 Java
微信小程序开发|基于微信小程序的健身陪练系统的设计与实现
微信小程序开发|基于微信小程序的健身陪练系统的设计与实现
|
1月前
|
存储 小程序 前端开发
如何开发微信小程序|基于微信小程序就诊预约系统的设计与实现
如何开发微信小程序|基于微信小程序就诊预约系统的设计与实现
|
1月前
|
小程序
微信小程序云开发|基于微信小程序实现房产中介平台系统(二)
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
1月前
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统(一)
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
1月前
|
Web App开发 前端开发 JavaScript
ios 系统滑动问题
ios 系统滑动问题
|
2月前
|
小程序 前端开发 开发工具
微信小程序云开发|基于微信小程序实现房产中介平台系统
微信小程序云开发|基于微信小程序实现房产中介平台系统
|
2月前
|
iOS开发
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~
【怒怼老乔】居然苹果手机IOS系统还不支持css3的transparent属性值,我去~~~~

热门文章

最新文章

相关产品

  • 云迁移中心