直接上代码。下面代码可以上传多个图片,亲测一次上传九张都没有问题,可以一次性获取九张图片的serverId分别用逗号隔开,但是会有一个BUG,就是wx.uploadImage只能点击一次,当选择图片成功后在点击选择图片后并没有进入wx.uploadImage方法里面,也就获取不到serverIds了。 往下看解决方案。
document.querySelector(‘#chooseImage‘).onclick = function () {
wx.chooseImage({
count: 3,
success: function (res) {
images.localId = res.localIds;
/* alert(‘已选择 ‘ + res.localIds.length + ‘ 张图片‘); */
$("#faceImg").attr("src", res.localIds[0]);
$("#faceImg1").attr("src", res.localIds[1]);
$("#faceImg2").attr("src", res.localIds[2]);
wxuploadImage(res.localIds);
}
});
};
var mediaId = null;
var serverIds = null;
var i = 0;
function wxuploadImage(e) {
wx.uploadImage({
localId: e[i].toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
// 上传序号,上传一张 累计 +1
i++;
//存储图片媒体ID,用,号分割
serverIds+=res.serverId+‘,‘;
alert(serverIds);
if(i<e.length){//本地图片ID 还没全部获取完图片媒体ID
//调用上传递归函数
wxuploadImage(e);
}else{
}
//mediaId = res.serverId; // 返回图片的服务器端ID
},
fail: function (error) {
picPath = ‘‘;
localIds = ‘‘;
alert(Json.stringify(error));
}
});
}
这样就可以等待上一张图片上传完成后在上传下一张图片
document.querySelector(‘#chooseImage‘).onclick = function () {
wx.chooseImage({
count: 1,
sizeType: [‘compressed‘],
sourceType: [‘album‘, ‘camera‘],
success: function (res) {
images.localId = res.localIds;
/* alert(‘已选择 ‘ + res.localIds.length + ‘ 张图片‘); */
$("<p class=‘jiao‘></p><p class=‘pic image_container‘><img src="+res.localIds[0]+"></p>").appendTo("#faceImg");
//wxuploadImage(res.localIds);
syncUpload(res.localIds);
}
});
};
var syncUpload = function(localIds){
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
}
});
};