微信公衆號接入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('上傳錯誤,請稍候重試');
		}
	});
}