調用照相拍照等 js 介面的許可權配置 和 照片上傳和下載實現，js照片上傳
直接上代碼：
1. 前端調試代碼：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>調用相機</title><link rel="stylesheet" href="css/weui.min.css"/></head><body><br/><br/><div><div class="hd"> <h1 class="page_title" ><span id="current_user"></span></h1> </div> <br/><div class="page slideIn button"> <div class="bd spacing"> <br/><br/><br/><br/> <a class="weui_btn weui_btn_primary" href="javascript:;" onclick="take_a_photo()">調用相機</a> </div></div></div><br/><br/><br/><br/><div> appId:<span id="appId"></span><br/> timestamp:<span id="timestamp"></span><br/> nonceStr:<span id="nonceStr"></span><br/> jsapi_ticket:<span id="jsapi_ticket"></span><br/> signature:<span id="signature"></span><br/> originalStr:<span id="originalStr"></span><br/> scan_result:<span id="result"></span><br/></div><script type='text/javascript' src='js/jquery.min.js'></script><script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script type="text/javascript" src="js/weixin_util.js"></script><script type="text/javascript">// 通過config介面注入許可權驗證配置$(function(){debugger;get_wx_config();})function get_wx_config(){debugger;//url（當前網頁的URL，不包含#及其後面部分）var url = window.location.href.split('#')[0];var indata = {"url":url};//$.post("http://wwww.axxx.cn/xxx/weixin/getConfigInfo.json", indata, function(data){$.post("http://localhost:8080/xxx/weixin/getConfigInfo.json", indata, function(data){debugger; if(data.rs == 'f'){ alert("系統錯誤"); }else{ var result = data.body; $("#appId").text(result.appId); $("#timestamp").text(result.timestamp); $("#nonceStr").text(result.nonceStr); $("#jsapi_ticket").text(result.jsapi_ticket); $("#signature").text(result.signature); $("#originalStr").text(result.originalStr); //步驟三：通過config介面注入許可權驗證配置 wx.config({ debug: true, // 開啟偵錯模式,調用的所有api的傳回值會在用戶端alert出來，若要查看傳入的參數，可以在pc端開啟，參數資訊會通過log打出，僅在pc端時才會列印。 appId: result.appId, // 必填，公眾號的唯一標識 timestamp: result.timestamp, // 必填，產生簽名的時間戳記 nonceStr: result.nonceStr, // 必填，產生簽名的隨機串 signature: result.signature,// 必填，簽名，見附錄1 jsApiList: ["chooseImage", "previewImage", "uploadImage", "downloadImage"] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2 // 基本思路是，上傳圖片到伺服器->下載多媒體介面講圖片下載到伺服器->返回伺服器儲存路徑->前台顯示 }); // 步驟四：通過ready介面處理成功驗證 wx.ready(function(){alert("wx.config success."); }); wx.error(function(res){ alert("wx.config failed.");//alert(res); // config資訊驗證失敗會執行error函數，如簽名到期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式查看， // 也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。 }); // {"errMsg":"config:invalid signature"} } },'json');}// 圖片介面// 拍照、本地選圖var images = {localId: [],serverId: []};// 拍照或者選擇照片function take_a_photo(){wx.chooseImage({count: 1, // 預設9，這裡每次只處理一張照片sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有 success: function (res) { images.localId = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標籤的src屬性顯示圖片 var i = 0, length = images.localId.length; function upload() { wx.uploadImage({ localId: images.localId[i], success: function(res) { i++; alert('已上傳：' + i + '/' + length); images.serverId.push(res.serverId); // res.serverId 就是 media_id，根據它去伺服器讀取圖片資料： var indata = {"media_id":res.serverId}; $.post("/weixin/getPhoto.json", indata, function(data){ if(data.rs == 'f'){ alert("系統錯誤"); }else{ alert(data.body);// 返回 圖片在我們自己的伺服器的url } },'json'); if (i < length) { upload(); } }, fail: function(res) { alert(JSON.stringify(res)); } }); } upload(); } });}</script></body></html>
前端這裡
var url = window.location.href.split('#')[0];
是比較容易犯錯的地方。
2. 後端介面：
@NoLogin @RequestMapping(value="/getConfigInfo.json", method=RequestMethod.POST) @ResponseBody public Object getConfigInfo(String url) throws NoSuchAlgorithmException{ String noncestr = "dsfww"; JsapiTicket ticket = AccessTokenJsapiTicketThread.getTicket(); logger.debug("ticket::::::;" + JSON.toJSONString(ticket)); System.out.println("ticket::::::;" + JSON.toJSONString(ticket)); if(ticket != null){ long timestamp = new Date().getTime(); StringBuilder sb = new StringBuilder("jsapi_ticket="); sb.append(ticket.getTicket()).append("&noncestr=").append(noncestr) .append("×tamp=").append(timestamp).append("&url=").append(url); MessageDigest md = MessageDigest.getInstance("SHA-1");// 對接後的字串進行sha1加密byte[] digest = md.digest(sb.toString().getBytes());String signature = SignUtil.byteToStr(digest).toLowerCase(); Map<String, String> map = new HashMap<String, String>(); map.put("jsapi_ticket", ticket.getTicket()); map.put("appId", WxPayConfPub.APPID); map.put("timestamp", String.valueOf(timestamp)); map.put("nonceStr", noncestr); map.put("signature", signature); map.put("originalStr", sb.toString()); logger.debug(JSON.toJSONString(map)); System.out.println(JSON.toJSONString(map)); return JsonConvertor.convertSuccessResult(map); } return JsonConvertor.convertFailResult(ErrorCodeEnum.SYSTEM_ERROR); } @NoLogin @RequestMapping(value="/getPhoto.json", method=RequestMethod.POST) @ResponseBody public Object getPhoto(String media_id) throws NoSuchAlgorithmException{ //http請求方式: GET,https調用// var url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"; AccessToken token = AccessTokenJsapiTicketThread.accessToken; String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" + token.getAccess_token() + "&media_id=" + media_id; HttpsURLConnection httpsUrl = null; InputStream inputStream = null; Date now = new Date(); String saveFileName = null; try { httpsUrl = HttpUtil.initHttpsConnection(url, "GET"); int responseCode = httpsUrl.getResponseCode(); if (responseCode == 200) { // 從伺服器返回一個輸入資料流 inputStream = httpsUrl.getInputStream(); byte[] data = new byte[1024]; int len = 0; FileOutputStream fileOutputStream = null; saveFileName = DateUtil.convertYMDH(now) + RandomStringUtils.random(6, true, true) + ".jpg";; // 絕對路徑 String path = imageRootPath + DateUtil.convertYMD(now) + "/" + saveFileName; File dir = new File(imageRootPath + DateUtil.convertYMD(now) + "/"); if (!dir.exists()) { FileUtils.forceMkdir(dir); } try { fileOutputStream = new FileOutputStream(path); while ((len = inputStream.read(data)) != -1) { fileOutputStream.write(data, 0, len); } fileOutputStream.flush(); } catch (IOException e) { e.printStackTrace(); } finally { if (inputStream != null) { try { inputStream.close(); } catch (IOException e) { } } if (fileOutputStream != null) { try { fileOutputStream.close(); } catch (IOException e) { } } } }} catch (IOException e) {e.printStackTrace();} // 返回圖片路徑 return JsonConvertor.convertSuccessResult(DateUtil.convertYMD(now) + "/" + saveFileName); }
/getConfigInfo.json 介面是配置 jsapi 許可權認證。
/getPhoto.json 是從 伺服器下載照片，儲存到我們自己的伺服器上。然後將我們自己伺服器的地方返回給前端使用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
