欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-29 23:13:22
微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverids = []; function...

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

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

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