微信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('上传失败,请重新上传!');
                }
            });
        }
目录
相关文章
|
13天前
|
安全 Android开发 数据安全/隐私保护
深入探讨iOS与Android系统安全性对比分析
在移动操作系统领域,iOS和Android无疑是两大巨头。本文从技术角度出发,对这两个系统的架构、安全机制以及用户隐私保护等方面进行了详细的比较分析。通过深入探讨,我们旨在揭示两个系统在安全性方面的差异,并为用户提供一些实用的安全建议。
|
2月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1339 58
|
9天前
|
安全 数据安全/隐私保护 Android开发
深入探索iOS系统安全机制:从基础到高级
本文旨在全面解析iOS操作系统的安全特性,从基础的权限管理到高级的加密技术,揭示苹果如何构建一个既开放又安全的移动平台。我们将通过实例和分析,探讨iOS系统如何保护用户数据免受恶意软件、网络攻击的威胁,并对比Android系统在安全性方面的差异。
|
16天前
|
安全 搜索推荐 Android开发
揭秘安卓与iOS系统的差异:技术深度对比
【10月更文挑战第27天】 本文深入探讨了安卓(Android)与iOS两大移动操作系统的技术特点和用户体验差异。通过对比两者的系统架构、应用生态、用户界面、安全性等方面,揭示了为何这两种系统能够在市场中各占一席之地,并为用户提供不同的选择。文章旨在为读者提供一个全面的视角,理解两种系统的优势与局限,从而更好地根据自己的需求做出选择。
39 2
|
24天前
|
安全 搜索推荐 Android开发
深入探索安卓与iOS系统的差异及其对用户体验的影响
在当今的智能手机市场中,安卓和iOS是两大主流操作系统。它们各自拥有独特的特性和优势,为用户提供了不同的使用体验。本文将深入探讨安卓与iOS系统之间的主要差异,包括它们的设计理念、用户界面、应用生态以及安全性等方面,并分析这些差异如何影响用户的使用体验。
|
24天前
|
安全 搜索推荐 Android开发
揭秘iOS与Android系统的差异:一场技术与哲学的较量
在当今数字化时代,智能手机操作系统的选择成为了用户个性化表达和技术偏好的重要标志。iOS和Android,作为市场上两大主流操作系统,它们之间的竞争不仅仅是技术的比拼,更是设计理念、用户体验和生态系统构建的全面较量。本文将深入探讨iOS与Android在系统架构、应用生态、用户界面及安全性等方面的本质区别,揭示这两种系统背后的哲学思想和市场策略,帮助读者更全面地理解两者的优劣,从而做出更适合自己的选择。
|
15天前
|
安全 Android开发 iOS开发
深入探索iOS与Android系统的差异性及优化策略
在当今数字化时代,移动操作系统的竞争尤为激烈,其中iOS和Android作为市场上的两大巨头,各自拥有庞大的用户基础和独特的技术特点。本文旨在通过对比分析iOS与Android的核心差异,探讨各自的优势与局限,并提出针对性的优化策略,以期为用户提供更优质的使用体验和为开发者提供有价值的参考。
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
536 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
17天前
|
安全 Android开发 iOS开发
安卓系统与iOS系统的比较####
【10月更文挑战第26天】 本文将深入探讨安卓(Android)和iOS这两大主流移动操作系统的各自特点、优势与不足。通过对比分析,帮助读者更好地理解两者在用户体验、应用生态、系统安全等方面的差异,从而为消费者在选择智能手机时提供参考依据。无论你是技术爱好者还是普通用户,这篇文章都将为你揭示两大系统背后的故事和技术细节。 ####
37 0
|
1月前
|
IDE Android开发 iOS开发
探索安卓与iOS系统的技术差异:开发者的视角
本文深入分析了安卓(Android)与苹果iOS两大移动操作系统在技术架构、开发环境、用户体验和市场策略方面的主要差异。通过对比这两种系统的不同特点,旨在为移动应用开发者提供有价值的见解,帮助他们在不同平台上做出更明智的开发决策。