最近再做微信公众号开发,涉及到手机上传图片和拍照的功能。
思路一:使用<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg"
multiple="multiple"
/>进行多张图片选择上传
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>多图预览</title>
</head>
<script>
var result=document.getElementById("result");
var file=document.getElementById("file");
function readAsDataURL(){
var file = document.getElementById("file").files;
var result=document.getElementById("result");
for(i = 0; i< file.length; i ++) {
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.οnlοad=function(e){
//多图预览
result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
}
}
}
</script>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file" multiple="multiple" />
<input type="button" value="读取图像" οnclick="readAsDataURL()" />
</p>
<div id="result" name="result"></div>
在pc端是没有任何问题的,但在手机端,虽然可以多张上传,但是要一次一选多次显示多张,并不能一次多选多显,所以放弃。
思路二:调用微信接口,观看了网上的demo感觉比较实用,所以开始研究。
1.登陆微信公众号平台,注册账号,绑定自己的公众号,主要是对公众号开发有所了解。在微信公众号中找到js安全域接口配置,一定要绑定自己开发的网站域名,这样才能使用接口,且不能是本地,只能是测试服或者正式服。
2.js安全域名绑定成功后,需要下载微信js文件,然后再开发的页面上引入,还需做接口权限配置:
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识,这个可以在公众号开发平台上取到。 timestamp: , // 必填,生成签名的时间戳,生成签名时的时间。 nonceStr: '', // 必填,生成签名的随机串,利用方法随机生成一段字符串 signature: '',// 必填,签名,见微信文档获取。 http://www.360doc.com/content/15/0111/21/19291760_439977810.shtml 附录五必看,不然签名永远不成功 jsApiList: [] // 必填,使用什么接口,就放入什么接口名。 })
有坑:后台不能直接对域名进行生成签名,而是前台通过请求加密传给后台,不然后台在加密过程中url会发生变化。前台工作;url = location.href.split('#')[0];url = encodeURIComponent(url);通过post请求传给后台。
3.通过微信选择接口获取相册照片的本地地址,可作为img src 进行显示,
wx.chooseImage({ success: function (res) { //success选择了图片才会执行的方法,compolete选择了和未选择都会执行的方法 var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
angular坑来了,ng-show不能解析微信本地地址链接,导致无法显示图片。无奈只能通过js赋值来实现,刚开始是动态创建导致标签并添加angular指令,由于angular的安全机制,这样创建已经无法监听到变量的变化,所以angular指令失效。
所以将angularJS中的ng-chang、ng-click都改成js原生的onclick、onchange。如此乱串总感觉有隐患。因此使用angular的另一种方法,利用服务directive创建标签
appofproduct.directive('wxImg', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="maxsize background-add"></div>',
link: function(scope, elem, attr) {
scope.$watch('pic', function(nowVal) {
elem.css('backgroundImage','url("'+nowVal+'")'); //这里可以使用jquery的方法进行添加,是不是最开始可以利用angu.element(elem).css('backgroundImage','url("'+nowVal+'")')来一个循环赋值,就不用这么麻烦了。
});
}
};
});
这里解决了图片展示的问题,微信可没这么简单,谁知道ios并不能展示,坑!!!解决方案
wx.getLocalImgData({
localId: result.localIds[i], // 图片的localID 而且不能以数组的形式,只能一张一张的解析展示。
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
$scope.localids.push(localData);
}
});
接下来调用sdk uplod上传接口,坑又来了,没有想象的那么简单。ios上传的图片无法展示。解决方案:
uploadImages(uploadString); //uploadString为wx.getLocalImgData解析后的ios地址组成的数组,这里如果使用微信原生没解析的地址进行上传会不会出现问题呢,当时项目代码太多,没有多想,以后用到在尝试吧。
function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
return ;
}
var localId = localImagesIds[0];
//解决IOS无法上传的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
wx.uploadImage({
isShowProgressTips:0,
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得。 参数只能为字符串,不能为数组
success: function (res) {
$http.get(api_EndPoint + "/wechat/imgToOss?token=" + $cookieStore.get("token") + "&mediaId=" + res.serverId).then(function(result) {
if(result.data.code == 0) {
$scope.order.orderSkuWarpList[index].aliSrc.push(result.data.data);
} else {
mAlert("error", result.data.msg);
};
});
uploadString.shift();
uploadImages(uploadString);
},
fail: function (res) {
mAlert('info','上传失败,请重新上传!');
}
});
}