WeChat JSSDKを使って画像のアップロードを実現します.

最近作ったプロジェクトは、ちょうどJSSDKを使って、使ったものを整理しています.
まずWeChat開発者のドキュメントリンクを添付します.WeChat開発者のドキュメントです.
主に使用されました
JSファイルを導入する
JSインターフェースを呼び出すページでは、以下のJSファイルを紹介します.http://res.wx.qq.com/open/js/jweixin-1.0.0.js
WeChat 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
    }
});

WeChatが返したserveridは、WeChat 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 "";
		}

全体的にはこの機能は比較的簡単ですが、微信アプリには触れたことがありません.
その過程で、微信JS SDK Demoの公式判例も参考にしました.