微信开发安卓手机微信浏览器进行多张上传时遇到的问题

在微信开发中遇见一个问题应用上传插件安卓手机无法进行多张上传

当时现象：

微信浏览器选择安卓手机图库点击一张没有选择完成就自动关闭图库，在ios上没有问题，

经过多方面查找原因，之后总结：

原因：安卓微信浏览器无法支持input multiple的h5属性

后来只能通过微信的 js-sdk的方法进行上传

原理：通过微信js-sdk先把图片上传到微信服务器临时素材，之后通过回调函数得到media_id,后端通过media_id在微信接口把图片下载到服务器。

页面中嵌入

之后js中进行配置

wx.config({
debug: false,//是否开启调试模式
appId: "{$sign.appId}",//
timestamp: {$sign.timestamp},
nonceStr: \'{$sign.nonceStr}\',
signature: \'{$sign.signature}\',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
\'checkJsApi\',\'chooseImage\', \'previewImage\', \'uploadImage\', \'downloadImage\',\'onMenuShareTimeline\',\'chooseWXPay\',\'getLocalImgData\'
]
});
wx.ready(function () {
// 在这里调用 API
var images = {
localId: [],
serverId: []
};
var i=0;
document.querySelector(\'#chooseImage\').onclick = function() {
if($(".uimg").length>0){
var thatcount=9-$(".uimg").length;
}else{
var thatcount=9;
}
wx.chooseImage({//选择图片
count:thatcount,//限制上传图片的张数
success: function(res) {
images.localId = res.localIds;
var str="";
var i = 0, length =images.localId.length;
images.serverId = [];
upload();
function upload() {
wx.uploadImage({//上传图片
localId: images.localId[i],
isShowProgressTips:0,
success: function(res) {

/***在这里遇见一个问题Begin****/

苹果手机ios8以后推出了新框架替代UIWebView的组件WKWebView;

WKWebView不支持localId直接显示图片

微信给出了接口wx.getLocalImgData来用于WKWebView获取本地图片

因此需要判断是否是wkwebview内核window.__wxjs_is_wkwebview

/***在这里遇见一个问题End****/
if (window.__wxjs_is_wkwebview) {
wx.getLocalImgData({
localId: images.localId[i], // 图片的localID
success: function (res2) {
var localData = res2.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace(\'jgp\', \'jpeg\');
$("#chooseImage").before("<div data-serverid=\'"+res.serverId+"\' class=\'uimg\' ><span class=\'js_close\' onclick=\'javascript:this.parentNode.parentNode.removeChild(this.parentNode)\'></span><img src=\'"+localData+"\'></div>");
},
fail:function(aa){
}
});
}else{
$("#chooseImage").before("<div data-serverid=\'"+res.serverId+"\' class=\'uimg\'><span class=\'js_close\' onclick=\'javascript:this.parentNode.parentNode.removeChild(this.parentNode)\'>x</span><img src=\'"+images.localId[i]+"\'></div>");
}
i++;
images.serverId.push(res.serverId);
$(".uploadtip").show().html(\'已上传：\' + i + \'/\' + length);
if (i < length) {
upload();
}else{
setTimeout(function(){
$(".uploadtip").hide();
},1000)
}
},
fail: function(res) {
console.log(JSON.stringify(res));
}
});
}
}
});
}
});

完美解决