前不久微信公开了一些接口，其中有一个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 * * @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
$('#filepicker').on('click', function () { wx.chooseimage({ success: function (res) { var localids = res.localids; syncupload(localids); } });});var syncupload = function(localids){ var localid = localids.pop(); wx.uploadimage({ localid: localid, isshowprogresstips: 1, success: function (res) { var serverid = res.serverid; // 返回图片的服务器端id //其他对serverid做处理的代码 if(localids.length > 0){ syncupload(localids); } } });};
本文给大家分享了微信jssdk上传图片的方法，希望对大家今后的工作学习有所帮助，当然方法也不止以上一种，还有很多，欢迎大家多多分享自己的经验。