首页 > 编程 > JavaScript > 正文

微信JSSDK上传图片

2019-11-20 11:45:39
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表