微信端調取相冊和攝像頭,實現圖片上傳,並上傳到本地服務器
在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程
1、config權限配置
$.ajax({ url:‘wx_getConfig‘, type:‘get‘, dataType:‘json‘, async:false, success:function(data){ var appId = data[0].appId; var timestamp = data[0].timestamp; var nonceStr = data[0].nonceStr; var signature = data[0].signature; wx.config({ debug: false,//調試模式 當為tru時,開啟調試模式 appId: appId, timestamp: timestamp.toString(),//簽名時間戳 nonceStr: nonceStr, //生成簽名的隨機串 signature: signature,//簽名 jsApiList: [‘chooseImage‘,‘uploadImage‘,‘getLocalImgData‘,‘downloadImage‘], success:function(){ alert("配置成功") }, fail:function(){ alert("配置失敗") } }); }, error:function(){ alert("error"); } })
這一步,在調試的時候, 會報config:invalid signature,如果出現這個錯誤,建議按一下順序去檢查
1.確認簽名算法正確,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
2.確認config中nonceStr(js中駝峰標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。
3.確認url是頁面完整的url(請在當前頁面alert(location.href.split(‘#‘)[0])確認),包括‘http(s)://‘部分,以及‘?‘後面的GET參數部分,但不包括‘#‘hash後面的部分。
4.確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
5.確保一定緩存access_token和jsapi_ticket。
2、config配置成功
當config配置成功後,就會執行ready函數,所有的操作必須等到config配置完成後才會執行,如果是頁面加載就執行的操作,就必須放在ready中執行。如果是在被觸發時執行的操作,則不需要放在ready中
wx.ready(function () { // 在這裏調用 API wx.checkJsApi({ jsApiList: [ ‘chooseImage‘, ‘uploadImage‘, ‘getLocalImgData‘, ‘downloadImage‘ ], success: function (res) { console.log(JSON.stringify(res)); } }); });
3、調取攝像頭和相冊
function takePicture(nums) { wx.chooseImage({ count: 1, needResult: 1, sizeType: [‘original‘, ‘compressed‘], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定來源是相冊還是相機,默認二者都有 success: function (data) { localIds = data.localIds[0]; // 返回選定照片的本地ID列表,localId可以作為img標簽的src屬性顯示圖片 var num1 = nums; wxuploadImage(localIds,num1); wxgetLocalImgData(localIds,num1); }, fail: function (res) { alterShowMessage("操作提示", JSON.stringify(res), "1", "確定", "", "", ""); } }); }
4、上傳到微信服務器
function wxuploadImage(e,num) { var $hiddenImg= $(".hiddenImg"); wx.uploadImage({ localId: e, // 需要上傳的圖片的本地ID,由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { mediaId = res.serverId; wxdownloadImage(mediaId) $($hiddenImg[num]).val(mediaId); }, fail: function (error) { picPath = ‘‘; localIds = ‘‘; alert(Json.stringify(error)); } }); }
此時的圖片上傳,是將圖片上傳到微信服務器,我們可以根據獲取到的medisId 將圖片下載到本地服務器。
5、獲取本地圖片接口,在本地顯示
function wxgetLocalImgData(e,num){ var $myimg = $(".myimg"); if(window.__wxjs_is_wkwebview){ wx.getLocalImgData({ localId: e, // 圖片的localID success: function (res) { var localData = res.localData; // localData是圖片的base64數據,可以用img標簽顯示 localData = localData.replace(‘jgp‘, ‘jpeg‘);//iOS 系統裏面得到的數據,類型為 image/jgp,因此需要替換一下 $($myimg[num]).attr("src", localData); },fail:function(res){ alert("顯示失敗"); } }); }else{ $($myimg[num]).attr("src", e); } }
此接口僅在 iOS WKWebview 下提供,用於兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題
6、提交到本地服務器,實現本地上傳
function tijiao(){ var userInfo = JSON.parse(localStorage.getItem("UserInfoKey")); var user = JSON.parse(localStorage.getItem("user")); var userId = user.userId; var company = userInfo.mainInfo; var kfCompanyProvince = userInfo.kfCompanyProvince; var kfCompanyCity = userInfo.kfCompanyCity; var kfCompanyDistrict = userInfo.kfCompanyDistrict; var companyAddress = userInfo.detailAddress; var userType = user.userType; var userName = userInfo.contacts; var principalPhoneCode = userInfo.phone; var img1 = $($(".hiddenImg")[0]).val(); var img3 = $($(".hiddenImg")[1]).val(); var img5 = $($(".hiddenImg")[2]).val(); var img6 = $($(".hiddenImg")[3]).val(); var img7 = $($(".hiddenImg")[4]).val(); $.ajax({ url:‘user_uploadInformation‘, data:{ "userId":userId, "company":company, "kfCompanyProvince":kfCompanyProvince, "kfCompanyCity":kfCompanyCity, "kfCompanyDistrict":kfCompanyDistrict, "companyAddress":companyAddress, "userType":userType, "userName":userName, "principalPhoneCode":principalPhoneCode, "img1":img1, "img3":img3, "img5":img5, "img6":img6, "img7":img7 }, type:‘post‘, dataType:‘json‘, async:false, success:function(data){ if(data.code == 0){ mui.alert("認證失敗,請重新認證") }else if(data.code == 1){ mui.alert("申請提交成功,請稍後",function(){ window.location.href="../../index/carManLookImg.jsp" }) } }, error:function(data){ alert("上傳失敗") } }) }
7、總結
根據以上的步驟,簡單的調取攝像頭和相冊實現圖片上傳的功能就實現了,其實微信平臺的開發者文檔給我們提供了非常詳細的開發者文檔,以後可以一起多研究研究。最後附上微信開發者文檔鏈接https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
微信端調取相冊和攝像頭,實現圖片上傳,並上傳到本地服務器