前不久微信公开了一些接口，其中有一个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,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.getString("errmsg"));
}
}
return jsTicket;
}
页面的配置
调用的所有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: []
};
拍照或从手机相册中选图接口
上传图片接口
上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1,// 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
}
});
微信返回的serverid我们需要通过微信api获取真实的图片二进制数据。
0) {
swapStream.write(buff,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
0){
syncUpload(localIds);
}
}
});
};
本文给大家分享了微信JSSDK上传图片的方法，希望对大家今后的工作学习有所帮助，当然方法也不止以上一种，还有很多，欢迎大家多多分享自己的经验。
原文链接：https://www.f2er.com/js/52759.html