版权声明：本文为博主原创文章，如需转载，敬请注明转载链接 https://blog.csdn.net/guobinhui/article/details/83243840
很多开发者朋友在进行微信公众号开发时，遇到微信js-sdk上传手机相册照片时IOS设备无法正常预览的情况，今天笔者结合多年的开发经验，把兼容IOS的解决方案分享给广大微信开发者朋友。
微信最新版本JSSDK文档 地址https://mp.weixin.qq.com/advanced/wiki?t=t=resource/res_main&id=mp1421141115
一、首先申明一点笔者本案例用的微信JSSDK版本是1.2.0的，官方文档给出的最新的1.4.0亲测暂时不能用。
二、微信js-sdk的chooseImage Api在不同版本的差异
页面通过LocalID预览图片
变化：微信JSSDK的1.1.0及以下版本IOS设备使用chooseImage Api返回的图片本地地址字段是wxlocalresource，安卓设备返回的图片本地地址字段是wxLocalResource，实际开发时需要进行replace处理，否则IOS设备预览不了图片。微信JSSDK的1.2.0及以上版本IOS设备使用chooseImage Api返回的图片本地地址字段是localData，安卓设备返回的图片本地地址字段是localld。
localld字段的值示例如下：”img src=resourceid://50114659201332”的方式预览图片。
三、chooseImage Api接口兼容安卓手机和IOS设备
备注：此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview ，不支持 localId 直接显示图片的问题。具体可参考《iOS网页开发适配指南》，据广大开发者说只有IOS8及以上的手机才能用wx.getLocalImgData这个本地图片接口。具体IOS哪些版本不能用，笔者没有挨个去试一试，主要是太穷了，用不起iPhone，更不说拥有多个iPhone去测兼容版本(同情笔者的可以在文末加笔者好友发个大红包救济一下笔者，哈哈)。目前测试wx.getLocalImgData这个接口在IOS设备上正常，其他IOS8以下版本暂时未知，直接上代码如下：
<script type="text/javascript">
var images = {
localId: [],
serverId: []
};
var carPicUrl = [];//存放车辆照片的url
var count = 6;
var ios = false;
var $imgContainer; //通过Jquery选择器获取的Dom对象类型是$对象
function chooseImg(obj){
if("add-drivingLicense-front"==obj.getAttribute("id")){
$imgContainer = $(".drivingLicense-front");//行驶证正本图片容器
}else if("add-drivingLicense-back"==obj.getAttribute("id")){
$imgContainer = $(".drivingLicense-back");//行驶证副本图片容器
}else if("add-idCard-front"==obj.getAttribute("id")){
$imgContainer = $(".idCard-front");//身份证正面图片容器
}else if("add-idCard-back"==obj.getAttribute("id")){
$imgContainer = $(".idCard-back");//身份证反面图片容器
}else if("add-car"==obj.getAttribute("id")){
$imgContainer = $(".car");//车辆图片容器
}
$.ajax({
url:"http:***/my/getWxConfig",
dataType:"json",
type:"post",
success:function(res){
wx.config({
debug: false,
appId:res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ['chooseImage', 'uploadImage','previewImage','downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
var ua = navigator.userAgent;
if (/(iPhone|iOS)/i.test(ua)) {
ios = true;
} else {
ios = false;
}
alert("是否是IOS设备"+ios);
wx.ready(function(){
if($imgContainer.attr("data-count") == "1"){
wx.chooseImage({
count: 1, // 微信默认9
sizeType: ['original', 'compressed'],
sourceType: ['album','camera'],
success: function (res) {
images.localId = res.localIds;
uploadImage(images.localId,$imgContainer);
},
fail:function(res){
alert("失败的原因1"+JSON.stringify(res));
},
})
}else{
wx.chooseImage({
count: count, // 微信默认9
sizeType: ['original', 'compressed'],
sourceType: ['album','camera'],
success: function (res) {
count = count-res.localIds.length;
images.localId = res.localIds;
uploadImage(images.localId,$imgContainer);
},
fail:function(res){
alert("失败的原因2"+JSON.stringify(res));
},
})
}
});
},
error:function(){
alert("获取JSAPI接口权限参数失败");
}
})
}
function uploadImage(localIds,imgContainer) {
var i = 0,picNum = images.localId.length;
images.serverId = [];
function upload(){
wx.uploadImage({
localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
images.serverId.push(res.serverId);
var localId = localIds[i];
//此处判断是安卓设备还是IOS或者iphone设备做图片预览兼容处理
if(ios){
wx.getLocalImgData({
localId: localId,
success: function (res) {
var localData = res.localData; // localData是微信IOS端图片的base64数据,可以用img标签显示
localData = localData.replace('jgp', 'jpeg');
// $(".img_container").append('<div style="width:45%;padding: 0 5px;"><img width="100%" height="80px" style="margin-right: 10px;" src="'+localData+'"/></div>');
if(imgContainer.attr("data-count") == "1"){//单张图片的处理
imgContainer.append('<div style="height:160px;" class="uploadImg" >' +
'<div class="close" style="position: absolute;top:5px;right:15px;"><img src="/img/delPic.png" onclick="delPic(this);"></div>' +
'<img width="100%" height="100%" src="'+localData+'"/></div>');
imgContainer.next().css("display",'none');
}if(imgContainer.attr("data-count") == "6"){ //多张图片的处理
if(count == 0){
imgContainer.next().css("display",'none');
}
imgContainer.append('<div style="width:50%;height:120px;padding: 5px 5px" class="multiImg">' +
'<div class="close"><img src="/img/delPic.png" onclick="delImg(this);"></div>' +
'<img name = "pic" style="width:100%;height:100%;margin-top:-32px;" src="'+localData+'"/></div>');
}
},
fail: function () {
alert('该图片暂时无法查看');
}
})
}else{
if(imgContainer.attr("data-count") == "1"){//单张图片的处理
imgContainer.append('<div style="height:160px;" class="uploadImg" >' +
'<div class="close" style="position: absolute;top:5px;right:15px;"><img src="/img/delPic.png" onclick="delPic(this);"></div>' +
'<img width="100%" height="100%" src="'+localId+'"/></div>');
imgContainer.next().css("display",'none');
}if(imgContainer.attr("data-count") == "6"){ //多张图片的处理
if(count == 0){
imgContainer.next().css("display",'none');
}
imgContainer.append('<div style="width:50%;height:120px;padding: 5px 5px" class="multiImg">' +
'<div class="close"><img src="/img/delPic.png" onclick="delImg(this);"></div>' +
'<img name = "pic" style="width:100%;height:100%;margin-top:-32px;" src="'+localId+'"/></div>');
}
}
var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
//将获取到的 mediaId 传入后台 方法savePicture
$.post("<%=request.getContextPath()%>/my/savePicture",{mediaId:mediaId,picType:imgContainer.attr("data-type")},function(res){
if("drivingLicense-front"==imgContainer.attr("class")){
$("input[name='drivingLicense-front-url']").val(res);
}else if("drivingLicense-back"==imgContainer.attr("class")){
$("input[name='drivingLicense-back-url']").val(res);
}else if("idCard-front"==imgContainer.attr("class")){
$("input[name='idCard-front-url']").val(res);
}else if("idCard-back"==imgContainer.attr("class")){
$("input[name='idCard-back-url']").val(res);
}else if("car"==imgContainer.attr("class")){
var multi = imgContainer.find(".multiImg");
$(multi[multi.length-1]).append('<input type="hidden" name="car-url" class="car-url" value="'+res+'" />');
// alert(multi[multi.length-1].innerHTML);
}
i++;
if(i < picNum){
upload();
}
})
},
fail: function (res) {
alert('上传失败，请重新上传！'+res);
}
});
}
upload();
}
截止目前，本案例就分享到这里，欢迎广大开发者朋友一起学习交流，笔者电话(同微信)：18629374628