那么我们可以定义一个如下所示的上传函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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); // 返回图片的服务器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上传失败，请重新上传！');}});} |
上传函数定义了，那么当点击图片框的时候，需要选择图片，定义如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//选择图片$('#uploadImages img').on('click', function () {var $img = $(this);wx.chooseImage({count: 1, // 默认9sizeType: ['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));}});}); |
当用户选择了所有的图片之后，就需要上传图片了。这里就需要用到我们刚才定义的函数了，具体代码如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//提交事件$('#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函数中，使用了递归，但一张图片上传完成后，就会再次调用本身，继续上传下一张图片，请注意以下关键代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
wx.uploadImage({localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {serverIds.push(res.serverId); // 返回图片的服务器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上传失败，请重新上传！');}}); |
这样，一切看起来是OK的，而且Android系统没有任何问题。但是，IOS却无法正常上传，一直会显示加载状态。代码反复检查，木有任何问题，那么肯定是微信的坑了。。。。
历经九九八十一难，终于找到解决办法：
|
1
2
3
4
5
|
var localId = localImagesIds[0];//解决IOS无法上传的坑if (localId.indexOf("wxlocalresource") != -1) {localId = localId.replace("wxlocalresource", "wxLocalResource");} |
uploadImages全部代码如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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); // 返回图片的服务器端IDlocalImagesIds.shift();uploadImages(localImagesIds);},fail: function (res) {$.alert('上传失败，请重新上传！');}});} |
以上所述是针对微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题的相关介绍，希望对大家有所帮助！
