45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:微信JSSDK如何上传图片文件?

微信JSSDK如何上传图片文件?

2015-09-16 20:42:54 来源:www.45fan.com 【

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


本文地址:http://www.45fan.com/bcdm/21311.html
Tags: 微信 上传 JSSDK
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部