微信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登陆判断简单实现代码
Apr 21 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
多种方式实现js图片预览
Dec 12 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
vue接口请求加密实例
Aug 11 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python 异常处理总结
2016/10/18 Python
python使用Tesseract库识别验证
2018/03/21 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
大学生学习自我评价
2014/01/13 职场文书
结婚邀请函范文
2014/01/14 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
消防隐患整改通知书
2015/04/22 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python