微信jssdk开发 ---- 图片上传并下载至自己服务器

第一步:设置js安全域名
微信jssdk开发 ---- 图片上传并下载至自己服务器
文章图片

微信jssdk开发 ---- 图片上传并下载至自己服务器
文章图片

第二步:设置IP白名单
微信jssdk开发 ---- 图片上传并下载至自己服务器
文章图片

微信jssdk开发 ---- 图片上传并下载至自己服务器
文章图片

第三步:初始化微信配置
js代码

$(function(){ $.ajax({ url: '../mini_Weixin_getConfig.action', dataType: 'json', type: 'GET', data: { "link": location.href.split("#")[0] }, async: false, success: function (data) { if(data){ wx.config({ debug: false, // 开启调试模式为true后可以通过alert弹窗将公众号签名等结果反馈出来 appId: data.appid, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature,// 必填,签名,见附录1 jsApiList: ['checkJsApi', 'chooseImage', 'uploadImage' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); } } }); });

后端代码
/** * 获取jssdk所需配置参数 */ public String getConfig(String link){ try { String noncestr = UUID.randomUUID().toString().replaceAll("-", ""); //随机数 String timestamp = getTimeStamp(); //时间戳 //获取sign签名的相关参数 SortedMap, String> signParams = new TreeMap, String>(); signParams.put("jsapi_ticket", TokenThread.access_token.getJsapi_ticket()); signParams.put("noncestr", noncestr); signParams.put("timestamp",timestamp); signParams.put("url",link); String signature = MiniUtil.createSHA1Sign(signParams); //JS-SDK使用权限签名JSONObject jsonObject = new JSONObject(); jsonObject.put("url", link); jsonObject.put("appid", TokenThread.appId); jsonObject.put("timestamp", timestamp); jsonObject.put("nonceStr", noncestr); jsonObject.put("signature", signature); logger.info("jssdk的相关参数jsonObject.toString()==="+jsonObject.toString()); return jsonObject.toString(); } catch (Exception e) { e.printStackTrace(); logger.info(e); } return ""; }

Util类
/** * TokenThread线程 */ public class TokenThread implements Runnable { public static AccessToken access_token = null; public static String appId ="公众号appId"; public static String appsecret = "公众号appsecret"; @Override public void run() { while (true) { try { // 调用工具类获取access_token(每日最多获取100000次,每次获取的有效期为7200秒) System.out.println("获取accessToken开始"); access_token = AccessToken.getAccessToken(appId, appsecret); // 微信公众号的凭证和秘钥if (null != access_token) { access_token = AccessToken.getMiniAccessToken(access_token, appId, appsecret); //获取accessToken// 7000秒之后重新进行获取 Thread.sleep((access_token.getExpires_in() - 200) * 1000); } else { // 获取失败时,60秒之后尝试重新获取 System.out.println("获取失败时,60秒之后尝试重新获取"); Thread.sleep(60 * 1000); } } catch (InterruptedException e) { e.printStackTrace(); } } }}

public class AccessToken { static Logger logger = Logger.getLogger(AccessToken.class); private String access_token; // 获取到的access_token private int expires_in; // 有效时间(两个小时,7200s) private String jsapi_ticket; // jsapi_ticket是公众号用于调用微信JS接口的临时票据。有效时间(两个小时,7200s) private String access_token_mini; // 获取小程序的access_token private int expires_in_mini; // 小程序有效时间(两个小时,7200s) public String getAccess_token() { return access_token; } public void setAccess_token(String access_token) { this.access_token = access_token; } public int getExpires_in() { return expires_in; } public void setExpires_in(int expires_in) { this.expires_in = expires_in; } public String getJsapi_ticket() { return jsapi_ticket; } public void setJsapi_ticket(String jsapi_ticket) { this.jsapi_ticket = jsapi_ticket; } public String getAccess_token_mini() { return access_token_mini; } public void setAccess_token_mini(String access_token_mini) { this.access_token_mini = access_token_mini; } public int getExpires_in_mini() { return expires_in_mini; } public void setExpires_in_mini(int expires_in_mini) { this.expires_in_mini = expires_in_mini; } /** * 获取accessToken * @param appID,微信公众号凭证 * @param appScret,微信公众号凭证秘钥 * @return */ public static AccessToken getAccessToken(String appID, String appScret) { AccessToken token = new AccessToken(); // 访问微信服务器-获取accessToken String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appID + "&secret=" + appScret; try { URL getUrl = new URL(url); HttpURLConnection http = (HttpURLConnection) getUrl.openConnection(); http.setRequestMethod("GET"); http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] b = new byte[size]; is.read(b); String message = new String(b, "UTF-8"); logger.info("getAccessToken.message=="+message); JSONObject json = JSONObject.fromObject(message); token.setAccess_token(json.getString("access_token")); token.setExpires_in(new Integer(json.getString("expires_in"))); // 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒 token = getJsapiTicket(token); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return token; } /** * 获取jsapi_ticket * 首先要先获取到access_token,再根据access_token获取jsapi_ticket * @return */ public static AccessToken getJsapiTicket(AccessToken token) { // 访问微信服务器-获取accessToken String jsapi_ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+token.getAccess_token()+"&type=jsapi"; try { URL getUrl = new URL(jsapi_ticket_url); HttpURLConnection http = (HttpURLConnection) getUrl.openConnection(); http.setRequestMethod("GET"); http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] b = new byte[size]; is.read(b); String message = new String(b, "UTF-8"); System.out.println("getJsapiTicket.message=="+message); JSONObject json = JSONObject.fromObject(message); token.setJsapi_ticket(json.getString("ticket")); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return token; } /** * 获取accessToken * @param appID,微信小程序凭证 * @param appScret,微信小程序凭证秘钥 * @return */ public static AccessToken getMiniAccessToken(AccessToken token,String appID, String appScret) { // 访问微信服务器-获取accessToken String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appID + "&secret=" + appScret; try { URL getUrl = new URL(url); HttpURLConnection http = (HttpURLConnection) getUrl.openConnection(); http.setRequestMethod("GET"); http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] b = new byte[size]; is.read(b); String message = new String(b, "UTF-8"); System.out.println("getMiniAccessToken.message=="+message); JSONObject json = JSONObject.fromObject(message); token.setAccess_token_mini(json.getString("access_token")); token.setExpires_in_mini(new Integer(json.getString("expires_in"))); } catch (MalformedURLException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return token; } }

第四步:js调用
//图片上传 function face(){ wx.ready(function(){ // 5 图片接口 // 5.1 拍照、本地选图 var images = { localId: [], serverId: [] }; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) {images.localId = res.localIds; //alert('已选择 ' + res.localIds.length + ' 张图片'); //$("#faceImg").attr("src", res.localIds[0]); //显示图片到页面上if (images.localId.length == 0) { alert('请先选择图片'); return; } $.showLoading("数据加载中"); var i = 0, length = images.localId.length; images.serverId = []; function upload() { wx.uploadImage({ localId: images.localId[i], success: function (res) { i++; //alert('已上传:' + i + '/' + length); images.serverId.push(res.serverId); if (i < length) { upload(); } getInfo(res.serverId); }, fail: function (res) {} }); } upload(); } }); //初始化jsapi接口 状态 wx.error(function (res) { alert("调用微信jsapi返回的状态:"+res.errMsg); }); }); }//图片下载至自己服务器 function getInfo(mediaId){ $.ajax({ type : "POST", url :'../mini_downloadMedia.action', data : {"mediaId":mediaId}, dataType : "json", success : function(data) { $.hideLoading(); var json = data; } }); }

后端代码
/** * 下载微信图片至本地服务器 * imgPath:图片保存所在文件夹 */ String imgPath = "wxImg"; //图片所在文件夹 public String downloadMedia(String mediaId){ HttpServletRequest request = ServletActionContext.getRequest(); String savePath = DirectoryUtil.getProjectParentPath(request).concat(File.separator). concat(DirectoryUtil.getProjectName(request)).concat("Files")+"\\"+imgPath; //savePath根据自己的需求来获取保存路径 String fileName = DloadImgUtil.downloadMedia(mediaId, savePath); //System.out.println(fileName); return fileName; }

图片下载Util类
/** * 获取媒体文件 * @param accessToken 接口访问凭证 * @param mediaId 媒体文件id * @param savePath 文件在本地服务器上的存储路径 * */ public static String downloadMedia( String mediaId, String savePath) { String accessToken = TokenThread.access_token.getAccess_token(); String filePath = null; String fileName = null; // 拼接请求地址 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", accessToken).replace("MEDIA_ID", mediaId); try { URL url = new URL(requestUrl); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setDoInput(true); conn.setRequestMethod("GET"); if (!savePath.endsWith("/")) { savePath += "/"; }// 将mediaId作为文件名 //filePath = savePath + mediaId + fileExt; fileName = IDUtil.getCustomUUID() + ".jpg"; filePath = savePath + fileName; BufferedInputStream bis = new BufferedInputStream(conn.getInputStream()); FileOutputStream fos = new FileOutputStream(new File(filePath)); byte[] buf = new byte[8096]; int size = 0; while ((size = bis.read(buf)) != -1) fos.write(buf, 0, size); fos.close(); bis.close(); conn.disconnect(); String info = String.format("下载媒体文件成功,filePath=" + filePath); logger.info(info); } catch (Exception e) { filePath = null; String error = String.format("下载媒体文件失败:%s", e); System.out.println(error); logger.info(error); } return fileName; }

第五步:启动项目,并开启定时获取access_token的线程
/** * 初始化时启动定时获取access_token的线程 * 需在项目启动的时候启动该servlet * @ClassName: GetAccessTokenServlet * @author admin */ public class GetAccessTokenServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override public void init() throws ServletException { new Thread(new TokenThread()).start(); // 启动定时获取access_token的线程 } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { new Thread(new TokenThread()).start(); super.doGet(req, resp); } }

【微信jssdk开发 ---- 图片上传并下载至自己服务器】web.xml
> -name>loadCAServlet -class>com.servlet.GetAccessTokenServlet 1 -mapping> -name>loadCAServlet /loadCAServlet

完成。。。

    推荐阅读