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

Posy ·

更新时间:2024-11-15

· 545 次阅读

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

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


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系统上传一直加载的问题的相关介绍，希望对大家有所帮助！

您可能感兴趣的文章:vue使用axios实现文件上传进度的实时更新详解ios用AFN进行文件上传的示例代码iOS利用AFNetworking实现文件上传的示例代码Vue axios 中提交表单数据(含上传文件)移动端html5图片上传方法【更好的兼容安卓IOS和微信】iOS开发中文件的上传和下载功能的基本实现IOS中html5上传图片方向问题解决方法详解利用exif.js解决ios手机上传竖拍照片旋转90度问题IOS 开发获取本地图片路径及上传iOS实现文件上传功能

图片上传图片 ios系统微信jssdk IOS

1024 个赞