使用微信JSSDK實現圖片上傳
阿新 • • 發佈:2019-01-08
最近做的一個專案,剛好用到了JSSDK,把用到的東西整理下。
先附上微信開發者文件連結:微信開發者文件
主要用到了:
引入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。