微信JSSDK上传图片


Posted in Javascript onAugust 23, 2015

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

Javascript 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 #Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 #Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 #Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
javascript中Array()数组函数详解
Aug 23 #Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 #Javascript
js实现的二级横向菜单条实例
Aug 22 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
php合并js请求的例子
2013/11/01 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
用javascript操作xml
2006/11/04 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
js实现简单计算器
2015/11/22 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python实现身份证号码解析
2015/09/01 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python实现五子棋小程序
2019/06/18 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
体育教师求职信
2014/06/30 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
学雷锋日活动总结
2015/02/06 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Mysql中常用的join连接方式
2022/05/11 MySQL