前不久微信公開了一些接口，其中有一個uploadImage接口用于上傳圖片，一般和chooseImage接口配合使用。先調用chooseImage接口讓用戶選擇一張或者多張圖片，用戶選擇完畢后微信會返回被選中圖片的id，再把圖片id傳給uploadImage接口上傳圖片。
最近做的一個項目，剛好用到了JSSDK，把用到的東西整理下。
先附上微信開發者文檔鏈接：微信開發者文檔
主要用到了：
引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
我們需要獲取微信js-sdk參數
/** * 獲取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; } 需要注意接口的調用次數是有限制的，需要控制好。
頁面的配置
wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: "$!{wxsign.get('appId')}", // 必填，公眾號的唯一標識 timestamp: "$!{wxsign.get('timeStamp')}", // 必填，生成簽名的時間戳 nonceStr: "$!{wxsign.get('nonceStr')}", // 必填，生成簽名的隨機串 signature: "$!{wxsign.get('signature')}",// 必填，簽名，見附錄1 jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 }); var images = { localId: [], serverId: [] }; 拍照或從手機相冊中選圖接口
wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片 }});上傳圖片接口
wx.uploadImage({ localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1，顯示進度提示 success: function (res) { var serverId = res.serverId; // 返回圖片的服務器端ID }});微信返回的serverid我們需要通過微信api獲取真實的圖片二進制數據。
/** * 獲取媒體文件 * * @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; // 返回圖片的服務器端ID //其他對serverId做處理的代碼 if(localIds.length > 0){ syncUpload(localIds); } } });};本文給大家分享了微信JSSDK上傳圖片的方法，希望對大家今后的工作學習有所幫助，當然方法也不止以上一種，還有很多，歡迎大家多多分享自己的經驗。
新聞熱點
疑難解答
