微信 java 实现js-sdk 图片上传下载完整流程


Posted in Javascript onOctober 21, 2016

最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结。

在这里能知道使用js api的基本配置

https://mp.weixin.qq.com/wiki

t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

我这里没有用checkJsApi去判断当前客户端版本是否支持指定JS接口,好。通过看开发文档,我们知道调用js接口直接都要通过config接口注入权限验证配置

<code class="hljs cs">wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名,见附录1
  jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});</code>

获取config里面参数的代码如下,我这里只用到chooseImage和uploadImage接口,chooseImage接口是拍照或从手机相册中选图接口,uploadImage接口是用来上传图片,所以jsApiList里面只写这两个就可以了

<code class="hljs avrasm">import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;
 
public class WxConfig {
  public static void main(String[] args) {
    String jsapi_ticket = "jsapi_ticket";
 
    // 注意 URL 一定要动态获取,不能 hardcode
    String url = "http://example.com";
    Map<string, string=""> ret = sign(jsapi_ticket, url);
    for (Map.Entry entry : ret.entrySet()) {
      System.out.println(entry.getKey() + ", " + entry.getValue());
    }
  };
 
  public static Map<string, string=""> sign(String jsapi_ticket, String url) {
    Map<string, string=""> ret = new HashMap<string, string="">();
    String nonce_str = create_nonce_str();
    String timestamp = create_timestamp();
    String string1;
    String signature = "";
 
    //注意这里参数名必须全部小写,且必须有序
    string1 = "jsapi_ticket=" + jsapi_ticket +
        "&noncestr=" + nonce_str +
        "×tamp=" + timestamp +
        "&url=" + url;
    System.out.println(string1);
 
    try
    {
      MessageDigest crypt = MessageDigest.getInstance("SHA-1");
      crypt.reset();
      crypt.update(string1.getBytes("UTF-8"));
      signature = byteToHex(crypt.digest());
    }
    catch (NoSuchAlgorithmException e)
    {
      e.printStackTrace();
    }
    catch (UnsupportedEncodingException e)
    {
      e.printStackTrace();
    }
 
    ret.put("url", url);
    ret.put("jsapi_ticket", jsapi_ticket);
    ret.put("nonceStr", nonce_str);
    ret.put("timestamp", timestamp);
    ret.put("signature", signature);
 
    return ret;
  }
 
  private static String byteToHex(final byte[] hash) {
    Formatter formatter = new Formatter();
    for (byte b : hash)
    {
      formatter.format("%02x", b);
    }
    String result = formatter.toString();
    formatter.close();
    return result;
  }
 
  private static String create_nonce_str() {
    return UUID.randomUUID().toString();
  }
 
  private static String create_timestamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
  }
}
</string,></string,></string,></string,></code>

ticket可以通过accessToken获取,代码如下

<code class="hljs cs">public static String getTicket(String accessToken) throws ParseException, IOException {
    public final static String sign_ticket_create_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
    JSONObject jsonObject = new JSONObject();
    JSONObject postjson=new JSONObject();
    String ticket =null;
    String url = sign_ticket_create_url.replace("ACCESS_TOKEN",accessToken);
    System.out.print("url="+url);
    String ticketurl ="";
    try {
      jsonObject = WeixinUtil.httpsRequest(url, "POST",postjson.toString());
      ticket= jsonObject.getString("ticket");
      System.out.println("ticket:"+ticket);
    }catch (Exception e) {
      e.printStackTrace();
    }
    return ticket;
  };</code>

当注入权限验证成功的时候会进入ready接口,那么我们就在ready接口里面继续我们需要的操作

<code class="hljs javascript">wx.ready(function(){
    //拍照或从手机相册中选图接口
    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: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1,显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
          }
        });
      }
    });
  });</code>

通过以上代码,我们就已经把图片上传到微信服务器了,但是我们上传到微信服务器的图片只能保存3天,所以上传完之后我们要把图片下载到我们的本地服务器,这里用到微信下载多媒体接口

http://file.api.weixin.qq.com/cgi-bin/media/get?

access_token=ACCESS_TOKEN&media_id=MEDIA_ID

其中media_id就是我们上面的serverId ,所以我们就可以把图片下载到本地了,代码如下

<code class="hljs java">import org.apache.log4j.Level;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.apache.log4j.Priority;
import org.springframework.util.StringUtils;
 
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection;
 
public class DloadImgUtil {
 /**
  * 根据内容类型判断文件扩展名
  *
  * @param contentType 内容类型
  * @return
  */
 public static String getFileexpandedName(String contentType) {
  String fileEndWitsh = "";
  if ("image/jpeg".equals(contentType))
   fileEndWitsh = ".jpg";
  else if ("audio/mpeg".equals(contentType))
   fileEndWitsh = ".mp3";
  else if ("audio/amr".equals(contentType))
   fileEndWitsh = ".amr";
  else if ("video/mp4".equals(contentType))
   fileEndWitsh = ".mp4";
  else if ("video/mpeg4".equals(contentType))
   fileEndWitsh = ".mp4";
  return fileEndWitsh;
 }
 /**
  * 获取媒体文件
  * @param accessToken 接口访问凭证
  * @param mediaId 媒体文件id
  * @param savePath 文件在本地服务器上的存储路径
  * */
 public static String downloadMedia(String accessToken, String mediaId, String savePath) {
  try {
   accessToken = WeixinUtil.getAccessToken1().getToken();
  } catch (IOException e) {
   e.printStackTrace();
  }
  String filePath = null;
  // 拼接请求地址
  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", accessToken).replace("MEDIA_ID", mediaId);
  try {
   URL url = new URL(requestUrl);
   HttpURLConnection conn = (HttpURLConnection) url.openConnection();
   conn.setDoInput(true);
   conn.setRequestMethod("GET");
 
   if (!savePath.endsWith("/")) {
    savePath += "/";
   }
   // 根据内容类型获取扩展名
   String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));
   // 将mediaId作为文件名
   filePath = savePath + mediaId + fileExt;
   BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
   FileOutputStream fos = new FileOutputStream(new File(filePath));
   byte[] buf = new byte[8096];
   int size = 0;
   while ((size = bis.read(buf)) != -1)
    fos.write(buf, 0, size);
   fos.close();
   bis.close();
 
   conn.disconnect();
   String info = String.format("下载媒体文件成功,filePath=" + filePath);
   System.out.println(info);
  } catch (Exception e) {
   filePath = null;
   String error = String.format("下载媒体文件失败:%s", e);
   System.out.println(error);
  }
  return filePath;
 }
}
</code>

这样就完成了js-sdk图片上传下载了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
详解vue-router传参的两种方式
Sep 10 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue实现在线翻译功能
Sep 27 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 #Javascript
Bootstrap如何创建表单
Oct 21 #Javascript
bootstrap table小案例
Oct 21 #Javascript
jquery+Jscex打造游戏力度条
Sep 12 #Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
快速了解Python开发环境Spyder
2020/06/29 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
新大陆软件面试题
2016/11/24 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
大学运动会通讯稿
2014/01/28 职场文书
初中同学聚会感言
2014/02/11 职场文书
中秋节活动总结
2014/08/29 职场文书
数学教师个人总结
2015/02/06 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技