开发者社区> codelove> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信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('上传失败,请重新上传!');
                }
            });
        }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SwiftUI极简教程02:Image图片的使用
SwiftUI极简教程02:Image图片的使用
591 0
JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="image/*" @change="selectImgs" ref="file"...
2317 0
安装jdk
jdk一般安装到c盘就行
635 0
JDK的安装以及配置
JDK的安装以及配置 JDK(Java Development Kit),顾名思义,是 Java 语言的软件开发工具包(SDK)。
909 0
js异步上传图片
通过iframe来实现无刷新的的文件上传,其实是有刷新的,只是在iframe里面隐藏了而已   简单的原理说明:   form里面的target要与iframe里面的id的值相等,指示是form相应了post事件,也就是post时间相应的时候刷新的是iframe而不是整个页面。
704 0
+关注
codelove
心莱科技CEO
90
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载