微信上传图片问题。

Posted 2020-10-13

 

直接上代码。下面代码可以上传多个图片，亲测一次上传九张都没有问题，可以一次性获取九张图片的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);
}
}
});
};