使用微信JSSDK實現圖片上傳


近期做的一個項目,剛好用到了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的返回值會在clientalert出來。若要查看傳入的參數,能夠在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。

做的過程中還參考了微信JS SDK Demo 官方案例




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM