前不久微信公开了一些接口，其中有一个uploadImage接口用于上传图片，一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片，用户选择完毕后微信会返回被选中图片的id，再把图片id传给uploadImage接口上传图片。
最近做的一个项目，刚好用到了JSSDK，把用到的东西整理下。
先附上微信开发者文档链接：
主要用到了：
引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：
我们需要获取微信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