微信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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
浅析JS运动
Dec 28 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
ES6函数和数组用法实例分析
May 23 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
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP多例模式介绍
2013/06/24 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
开源Web应用框架Django图文教程
2017/03/09 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
财务主管自我鉴定
2014/01/17 职场文书
就业协议书范本
2014/04/11 职场文书
承诺书范文
2014/06/03 职场文书
村班子对照检查材料
2014/08/18 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
SQL SERVER触发器详解
2022/02/24 SQL Server