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

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

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

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('上传失败，请重新上传！');
}
});
}

以上所述是针对微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题的相关介绍，希望对大家有所帮助！

赞 (0)

相关推荐

  • iOS实现压缩图片上传功能

    本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

  • 详解IOS开发中图片上传时两种图片压缩方式的比较

    IOS 图片上传时两种图片压缩方式的比较 上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之前已经上传了的头像了,在项目中明显的不可行. 上传图片的正确方式:上传头像到服务器一般是将图片NSData上传到服务器,服务器返回一个图片NSString地址,之后再将NSString的路径转为url并通过url请求去更新用户头像(用户头像此时更新的便是NS

  • 移动端html5图片上传方法【更好的兼容安卓IOS和微信】

    之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

  • iOS实现相册多选图片上传功能

    本文实例为大家分享了iOS实现相册多选图片上传的具体代码,供大家参考,具体内容如下 原理:获取手机里的全部照片,显示在自定义的视图里 //获取到相册的所有图片 - (void)addAllPhotos{ @WeakObj(self); _assetsLibrary=[[ALAssetsLibrary alloc]init]; [_assetsLibrary enumerateGroupsWithTypes:ALAssetsGroupSavedPhotos usingBlock:^(ALAsset

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

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片

  • 微信jssdk在iframe页面失效问题的解决措施

    项目需求 微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片 遇到的问题 当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作.但是单独打开子页面可以正

  • 快速解决Django关闭Debug模式无法加载media图片与static静态文件

    开发时,通常打开Debug模式会快速定位开发时的一些问题. 项目开始部署时,关闭Debug模式,url.py路由静态文件和图片写法: # url.py from django.views import static from django.conf import settings #路由静态文件和图片 urlpatterns = [ url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROO

  • 解决Android WebView拦截url,视频播放加载失败的问题

    需求:Android调用webView加载网页的时候,拦截某一个链接不执行此链接,执行指定跳转到其他activity页面. webview的setWebViewClient方法中提供了几个api: // 此回调是拦截点击要跳转的url链接,并对请求的url链接做修改(添加删除字段) public WebResourceResponse shouldInterceptRequest(WebView view, String url) // 在点击请求的是链接是才会调用,重写此方法返回true表明点

  • iOS开发中用imageIO渐进加载图片及获取exif的方法

    imageIO完成渐进加载图片 一.常见渐进加载图片模式   目前我们看到的渐进加载主要有以下三种实现方式:   1)  依次从web上加载不同尺寸的图片,从小到大.最开始先拉取一个小缩略图做拉伸显示,然后拉取中等规格的图,拉取完毕直接覆盖显示,最后拉取原图,拉取完成后显示原图.   2)直接从web上拉取最大的图片,每接受一点儿数据就显示一点儿图片,这样就会实现从上到下一点点刷新出来的效果.   3)结合第1种和第2种,先拉取一个缩略图做拉伸显示,然后采用第二种方法直接拉取原图,这样即可以实现

  • 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

    原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面出现空白的情况. 解决办法: 滚动之前,先设-webit-overflow-scrolling的属性值为auto,然后页面滚动完了,再设为touch即可. 实例: $("#id").css('-webkit-overflow-scrolling','auto'); $(

  • 解决python 虚拟环境删除包无法加载的问题

    项目开发一直在docker的虚拟环境上,遇到了一个问题,就是把虚拟环境的包删掉(rm -rf xxx)之后,再重新拷贝一个(跟原来包一模一样的文件夹)进去发现pycharm再也找不到这个包了,后来在同事的帮助下一步步的解决了这个问题: 解决流程: 1.定位问题 在虚拟环境下引入这个包: #进入虚拟环境 source bin/activate #1.进入python #2.引入报错的包 (xenwebsite-env)[root@aeb02c10de04 xenwebsite-env]# pyth

  • 解决IDEA插件市场Plugins无法加载的问题

    问题:IDEA Plugin中搜索插件慢甚至无法加载出来,无法安装插件 解决方案: 加载半天无响应结果 1.检查网络环境,一般来说,如果wifi卡了,可以用4G热点试一下,糟糕的网络环境也可能是你加载不出来的原因之一 2.如果多次更换网络仍然不能打开,可以通过修改idea内置的代理服务器解决 首先打开Setting 依次找到Appearance&Behavior----->System Settings------>HTTP Proxy 配置代理服务器,输入URL 127.0.0.1:

  • 详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

    详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

    HTML5+canvas进行移动端手机照片上传时,发现iOS手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,这里主要用到Orientation属性. Orientation属性说明如下: 下面就直接上代码了. 主要有html5页面和一个js,示例功能包含了图片压缩和旋转. 自己写的是uploadImage.js. html5测试页面

  • 微信 jssdk 签名错误invalid signature的解决方法

    几乎每一个开发用于微信公众号页面的工程师都遇到过微信jssdk报的各种错误,通常是permission denied,类似这样: 通常他们会建议你把debug选项开开,比如这样: wechat.config({ debug: true, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['scanQRCode'], }); 结果你又遇到了invalid signatu

随机推荐