微信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 相关文章推荐
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
使用JavaScript进行表单校验功能
Aug 01 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 默默经典版本
2009/08/04 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
简述Python2与Python3的不同点
2018/01/21 Python
python中时间模块的基本使用教程
2019/05/14 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python
create-react-app开发常用配置教程
2022/06/25 Javascript