微信JSSDK上傳圖片
前不久微信公開了一些接口,其中有一個uploadImage接口用于上傳圖片,一般和chooseImage接口配合使用。先調(diào)用chooseImage接口讓用戶選擇一張或者多張圖片,用戶選擇完畢后微信會返回被選中圖片的id,再把圖片id傳給uploadImage接口上傳圖片。
最近做的一個項(xiàng)目,剛好用到了JSSDK,把用到的東西整理下。
先附上微信開發(fā)者文檔鏈接:微信開發(fā)者文檔
主要用到了:
引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
我們需要獲取微信js-sdk參數(shù)
/** * 獲取access_token * * @param appid * 憑證 * @param appsecret * 密鑰 * @return */ public static WxAccessToken getAccessToken() { WxAccessToken accessToken = null; String requestUrl = access_token_url.replace("APPID", Setting.getSetting("WX_PL_APP_ID")).replace( "APPSECRET", Setting.getSetting("APP_SECRET")); JSONObject jsonObject = httpRequest(requestUrl, "GET", null); // 如果請求成功 if (null != jsonObject) { try { accessToken = new WxAccessToken(); accessToken.setToken(jsonObject.getString("access_token")); accessToken.setExpiresIn(jsonObject.getInt("expires_in")); } catch (JSONException e) { accessToken = null; // 獲取token失敗 log.error("獲取token失敗 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg")); } } return accessToken; } public static String jsapiTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; /** * 獲取JsTicket * * @param accessToken * accessToken * @return */ public static WxJsTicket getJsTicket(String accessToken) { WxJsTicket jsTicket = null; String url = jsapiTicket.replaceAll("ACCESS_TOKEN", accessToken); JSONObject jsonObject = httpRequest(url, "GET", null); // 如果請求成功 if (null != jsonObject) { try { jsTicket = new WxJsTicket(); jsTicket.setTicket(jsonObject.getString("ticket")); jsTicket.setExpiresIn(jsonObject.getInt("expires_in")); } catch (JSONException e) { jsTicket = null; // 獲取token失敗 log.error("獲取jsapiTicket失敗 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg")); } } return jsTicket; }
需要注意接口的調(diào)用次數(shù)是有限制的,需要控制好。
頁面的配置
wx.config({ debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId: "$!{wxsign.get('appId')}", // 必填,公眾號的唯一標(biāo)識 timestamp: "$!{wxsign.get('timeStamp')}", // 必填,生成簽名的時間戳 nonceStr: "$!{wxsign.get('nonceStr')}", // 必填,生成簽名的隨機(jī)串 signature: "$!{wxsign.get('signature')}",// 必填,簽名,見附錄1 jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2 }); var images = { localId: [], serverId: [] };
拍照或從手機(jī)相冊中選圖接口
wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片 } });
上傳圖片接口
wx.uploadImage({ localId: '', // 需要上傳的圖片的本地ID,由chooseImage接口獲得 isShowProgressTips: 1, // 默認(rèn)為1,顯示進(jìn)度提示 success: function (res) { var serverId = res.serverId; // 返回圖片的服務(wù)器端ID } });
微信返回的serverid我們需要通過微信api獲取真實(shí)的圖片二進(jìn)制數(shù)據(jù)。
/** * 獲取媒體文件 * * @param accessToken * 接口訪問憑證 * @param media_id * 媒體文件id * */ public static String downloadMedia(String mediaId,HttpServletRequest request) { String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"; requestUrl = requestUrl.replace("ACCESS_TOKEN", WxTokenThread.accessToken.getToken()).replace( "MEDIA_ID", mediaId); HttpURLConnection conn = null; try { URL url = new URL(requestUrl); conn = (HttpURLConnection) url.openConnection(); conn.setDoInput(true); conn.setRequestMethod("GET"); conn.setConnectTimeout(30000); conn.setReadTimeout(30000); BufferedInputStream bis = new BufferedInputStream( conn.getInputStream()); ByteArrayOutputStream swapStream = new ByteArrayOutputStream(); byte[] buff = new byte[100]; int rc = 0; while ((rc = bis.read(buff, 0, 100)) > 0) { swapStream.write(buff, 0, rc); } byte[] filebyte = swapStream.toByteArray(); return PictureStore.getInstance().getImageServerUrl() + PictureStore.getInstance().store(filebyte); } catch (Exception e) { e.printStackTrace(); } finally { if(conn != null){ conn.disconnect(); } } return ""; }
整體上做這個功能還是比較簡單的,只不過以前沒有接觸過微信api。
微信 jssdk 上傳多張圖片
代碼如下:
jssdk
$('#filePicker').on('click', function () { wx.chooseImage({ success: function (res) { var localIds = res.localIds; syncUpload(localIds); } }); }); var syncUpload = function(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function (res) { var serverId = res.serverId; // 返回圖片的服務(wù)器端ID //其他對serverId做處理的代碼 if(localIds.length > 0){ syncUpload(localIds); } } }); };
本文給大家分享了微信JSSDK上傳圖片的方法,希望對大家今后的工作學(xué)習(xí)有所幫助,當(dāng)然方法也不止以上一種,還有很多,歡迎大家多多分享自己的經(jīng)驗(yàn)。
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)
- Javascript 驗(yàn)證上傳圖片大小[客戶端]
- jsp中實(shí)現(xiàn)上傳圖片即時顯示效果功能
- JS上傳圖片前的限制包括(jpg jpg gif及大小高寬)等
- js 上傳圖片預(yù)覽問題
- js實(shí)現(xiàn)自定義下拉框
相關(guān)文章
通過Javascript讀取本地Excel文件內(nèi)容的代碼示例
這篇文章主要介紹了通過Javascript讀取本地Excel文件內(nèi)容的代碼示例,但需要一定的條件才可以使用js操作本地文件,需要的朋友參考下吧2014-04-04js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析
這篇文章主要為大家介紹了npm安裝依賴時出現(xiàn)Peer Dependencies沖突報錯解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動及右鍵點(diǎn)擊盒子消失效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)拖拽盒子移動及右鍵點(diǎn)擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
本篇文章主要是對Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02