微信JSSDK上传图片
前不久微信公开了一些接口，其中有一个uploadImage接口用于上传图片，一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片，用户选择完毕后微信会返回被选中图片的id，再把图片id传给uploadImage接口上传图片。
最近做的一个项目，刚好用到了JSSDK，把用到的东西整理下。
先附上微信开发者文档链接：微信开发者文档
主要用到了：
引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
我们需要获取微信js-sdk参数
/**
*获取access_token
*
*@paramappid
*凭证
*@paramappsecret
*密钥
*@return
*/
publicstaticWxAccessTokengetAccessToken(){
WxAccessTokenaccessToken=null;
StringrequestUrl=access_token_url.replace("APPID",Setting.getSetting("WX_PL_APP_ID")).replace(
"APPSECRET",Setting.getSetting("APP_SECRET"));
JSONObjectjsonObject=httpRequest(requestUrl,"GET",null);
//如果请求成功
if(null!=jsonObject){
try{
accessToken=newWxAccessToken();
accessToken.setToken(jsonObject.getString("access_token"));
accessToken.setExpiresIn(jsonObject.getInt("expires_in"));
}catch(JSONExceptione){
accessToken=null;
//获取token失败
log.error("获取token失败errcode:{}errmsg:{}",
jsonObject.getInt("errcode"),
jsonObject.getString("errmsg"));
}
}
returnaccessToken;
}
publicstaticStringjsapiTicket="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
/**
*获取JsTicket
*
*@paramaccessToken
*accessToken
*@return
*/
publicstaticWxJsTicketgetJsTicket(StringaccessToken){
WxJsTicketjsTicket=null;
Stringurl=jsapiTicket.replaceAll("ACCESS_TOKEN",accessToken);
JSONObjectjsonObject=httpRequest(url,"GET",null);
//如果请求成功
if(null!=jsonObject){
try{
jsTicket=newWxJsTicket();
jsTicket.setTicket(jsonObject.getString("ticket"));
jsTicket.setExpiresIn(jsonObject.getInt("expires_in"));
}catch(JSONExceptione){
jsTicket=null;
//获取token失败
log.error("获取jsapiTicket失败errcode:{}errmsg:{}",
jsonObject.getInt("errcode"),
jsonObject.getString("errmsg"));
}
}
returnjsTicket;
}
需要注意接口的调用次数是有限制的，需要控制好。
页面的配置
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
});
varimages={
localId:[],
serverId:[]
};
拍照或从手机相册中选图接口
wx.chooseImage({
count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
varlocalIds=res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
上传图片接口
wx.uploadImage({
localId:'',//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
varserverId=res.serverId;//返回图片的服务器端ID
}
});
微信返回的serverid我们需要通过微信api获取真实的图片二进制数据。
/**
*获取媒体文件
*
*@paramaccessToken
*接口访问凭证
*@parammedia_id
*媒体文件id
**/
publicstaticStringdownloadMedia(StringmediaId,HttpServletRequestrequest){
StringrequestUrl="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);
HttpURLConnectionconn=null;
try{
URLurl=newURL(requestUrl);
conn=(HttpURLConnection)url.openConnection();
conn.setDoInput(true);
conn.setRequestMethod("GET");
conn.setConnectTimeout(30000);
conn.setReadTimeout(30000);
BufferedInputStreambis=newBufferedInputStream(
conn.getInputStream());
ByteArrayOutputStreamswapStream=newByteArrayOutputStream();
byte[]buff=newbyte[100];
intrc=0;
while((rc=bis.read(buff,0,100))>0){
swapStream.write(buff,0,rc);
}
byte[]filebyte=swapStream.toByteArray();
returnPictureStore.getInstance().getImageServerUrl()+PictureStore.getInstance().store(filebyte);
}catch(Exceptione){
e.printStackTrace();
}finally{
if(conn!=null){
conn.disconnect();
}
}
return"";
}
整体上做这个功能还是比较简单的，只不过以前没有接触过微信api。
微信jssdk上传多张图片
代码如下：
jssdk
$('#filePicker').on('click',function(){
wx.chooseImage({
success:function(res){
varlocalIds=res.localIds;
syncUpload(localIds);
}
});
});
varsyncUpload=function(localIds){
varlocalId=localIds.pop();
wx.uploadImage({
localId:localId,
isShowProgressTips:1,
success:function(res){
varserverId=res.serverId;//返回图片的服务器端ID
//其他对serverId做处理的代码
if(localIds.length>0){
syncUpload(localIds);
}
}
});
};
本文给大家分享了微信JSSDK上传图片的方法，希望对大家今后的工作学习有所帮助，当然方法也不止以上一种，还有很多，欢迎大家多多分享自己的经验。