微信公众号接入JSSDK实现拍照上传

啥？你说我为啥要用JSSDK？真香
首先看看微信官方文档，接入JSSDK步骤：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
步骤一：绑定域名（略过）
步骤二：引入JS文件（注意：坑来了）
http://res.wx.qq.com/open/js/jweixin-1.6.0.js（安卓可，ios没效果）
http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（安卓可，ios没效果）
啥情况？？求求百度大神

注意！！用下面这个js文件（安卓可，ios可）

接下来，愉快的写代码了：
步骤二：引入JS文件
步骤三：通过config接口注入权限验证配置
步骤四：通过ready接口处理成功验证

	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript">
		var signUrl = window.location.href.split('#')[0];
		$.ajax({
			url: baseUrl + "/f/js_sdk",
			method: "get",
			data: {
				url: signUrl
			},
			success: function (res) {
				console.log(res)
				console.log("wx.config() ---> 接收后台返回的参数");
				wx.config({
					debug: false,
					appId: res.data.appId,
					timestamp: res.data.timestamp,
					nonceStr: res.data.nonceStr,
					signature: res.data.signature,
					jsApiList: [
						'chooseImage',
						'previewImage',
						'uploadImage',
						'downloadImage',
						'getLocalImgData'
					]
				})
				//通过ready接口处理成功验证
				wx.ready(function () {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
					wx.checkJsApi({
						jsApiList: [
							'chooseImage',
							'previewImage',
							'uploadImage',
							'downloadImage',
							'	'
						], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function (res) {
							console.log(res)
							// 以键值对的形式返回，可用的api值true，不可用为false
							// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
							$('#uploadBox').click(function () {
								chooseImgs();
							})
						},
					})
				})
				wx.error(function (res) {
					console.log(res);
				});
			}
		});
	</script>

function chooseImgs() {
	wx.chooseImage({
		count: 1, // 默认1
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		success: function (res) {
			localIds = res.localIds;
			uploadimg(localIds[0])
		}
	});
}

注意！！坑又来了
这个上传只是上传一个serverId，然后，后端根据serverId去微信服务器拿到这个图片，下载到自己的服务器，再返回给图片路径给前端，这样才走完了流程。

function uploadimg(e) {
	//具体上传图片
	wx.uploadImage({
		localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
		isShowProgressTips: 1, // 默认为1，显示进度提示
		success: function (res) {
			var serverId = res.serverId;
			$.ajax({
				type: "post",
				url: baseUrl + "/drvier/upload",
				data: {
					file:serverId
				},
				dataType: "json",
				success: function (res) {
					if(res.code == 0){
						mui.toast(res.msg)
						imgs.push(res.url)
						//实现图片预览
						var str = `<div class="img-cont"><img src="${res.url}"/><div class="delete-img" onclick="deleteImg('${res.url}',this)"><img src="img/delete_img.png"/></div></div>`
						$('#uploadPics').append(str)
						if(imgs.length>=3){
							$('#uploadBox').hide();
						}
					}else{
						mui.toast(res.msg)
					}
				},
				error:function(){
					mui.toast('上传错误,请稍候重试');
				}
			});
		},
		fail: function (error) {
			mui.toast('上传错误,请稍候重试');
		}
	});
}