微信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上传图片的方法,希望对大家今后的工作学习有所帮助,当然方法也不止以上一种,还有很多,欢迎大家多多分享自己的经验。