UDN-企业互联网技术人气社区

板块导航

浏览  : 2722
回复  : 4

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

[复制链接]
西北的风的头像 楼主
发表于 2017-1-17 17:34:49 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了微信 java 实现js-sdk 图片上传下载完整流程的相关资料,需要的朋友可以参考下
  
  最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结。
  
  在这里能知道使用js API的基本配置
  
  https://mp.weixin.qq.com/wiki
  
  t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
  
  我这里没有用checkJsApi去判断当前客户端版本是否支持指定JS接口,好。通过看开发文档,我们知道调用js接口直接都要通过config接口注入权限验证配置
  1. <code class="hljs cs">wx.config({
  2.   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  3.   appId: '', // 必填,公众号的唯一标识
  4.   timestamp: , // 必填,生成签名的时间戳
  5.   nonceStr: '', // 必填,生成签名的随机串
  6.   signature: '',// 必填,签名,见附录1
  7.   jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  8. });</code>
复制代码
 
  获取config里面参数的代码如下,我这里只用到chooseImage和uploadImage接口,chooseImage接口是拍照或从手机相册中选图接口,uploadImage接口是用来上传图片,所以jsApiList里面只写这两个就可以了
  1. <code class="hljs aVRasm">import java.util.UUID;
  2. import java.util.Map;
  3. import java.util.HashMap;
  4. import java.util.Formatter;
  5. import java.security.MessageDigest;
  6. import java.security.NoSuchAlgorithmException;
  7. import java.io.UnsupportedEncodingException;

  8. public class WxConfig {
  9.   public static void main(String[] args) {
  10.     String jsapi_ticket = "jsapi_ticket";

  11.     // 注意 URL 一定要动态获取,不能 hardcode
  12.     String url = "http://example.com";
  13.     Map<string, string=""> ret = sign(jsapi_ticket, url);
  14.     for (Map.Entry entry : ret.entrySet()) {
  15.       System.out.println(entry.getKey() + ", " + entry.getValue());
  16.     }
  17.   };

  18.   public static Map<string, string=""> sign(String jsapi_ticket, String url) {
  19.     Map<string, string=""> ret = new HashMap<string, string="">();
  20.     String nonce_str = create_nonce_str();
  21.     String timestamp = create_timestamp();
  22.     String string1;
  23.     String signature = "";

  24.     //注意这里参数名必须全部小写,且必须有序
  25.     string1 = "jsapi_ticket=" + jsapi_ticket +
  26.         "&noncestr=" + nonce_str +
  27.         "×tamp=" + timestamp +
  28.         "&url=" + url;
  29.     System.out.println(string1);

  30.     try
  31.     {
  32.       MessageDigest crypt = MessageDigest.getInstance("SHA-1");
  33.       crypt.reset();
  34.       crypt.update(string1.getBytes("UTF-8"));
  35.       signature = byteToHex(crypt.digest());
  36.     }
  37.     catch (NoSuchAlgorithmException e)
  38.     {
  39.       e.printStackTrace();
  40.     }
  41.     catch (UnsupportedEncodingException e)
  42.     {
  43.       e.printStackTrace();
  44.     }

  45.     ret.put("url", url);
  46.     ret.put("jsapi_ticket", jsapi_ticket);
  47.     ret.put("nonceStr", nonce_str);
  48.     ret.put("timestamp", timestamp);
  49.     ret.put("signature", signature);

  50.     return ret;
  51.   }

  52.   private static String byteToHex(final byte[] hash) {
  53.     Formatter formatter = new Formatter();
  54.     for (byte b : hash)
  55.     {
  56.       formatter.format("%02x", b);
  57.     }
  58.     String result = formatter.toString();
  59.     formatter.close();
  60.     return result;
  61.   }

  62.   private static String create_nonce_str() {
  63.     return UUID.randomUUID().toString();
  64.   }

  65.   private static String create_timestamp() {
  66.     return Long.toString(System.currentTimeMillis() / 1000);
  67.   }
  68. }
  69. </string,></string,></string,></string,></code>
复制代码

  ticket可以通过accessToken获取,代码如下
  1. <code class="hljs cs">public static String getTicket(String accessToken) throws ParseException, IOException {
  2.     public final static String sign_ticket_create_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
  3.     JSONObject jsonObject = new JSONObject();
  4.     JSONObject postjson=new JSONObject();
  5.     String ticket =null;
  6.     String url = sign_ticket_create_url.replace("ACCESS_TOKEN",accessToken);
  7.     System.out.print("url="+url);
  8.     String ticketurl ="";
  9.     try {
  10.       jsonObject = WeixinUtil.httpsRequest(url, "POST",postjson.toString());
  11.       ticket= jsonObject.getString("ticket");
  12.       System.out.println("ticket:"+ticket);
  13.     }catch (Exception e) {
  14.       e.printStackTrace();
  15.     }
  16.     return ticket;
  17.   };</code>
复制代码

  当注入权限验证成功的时候会进入ready接口,那么我们就在ready接口里面继续我们需要的操作
  1. <code class="hljs JavaScript">wx.ready(function(){
  2.     //拍照或从手机相册中选图接口
  3.     wx.chooseImage({
  4.       count: 1, // 最多能选择多少张图片,默认9
  5.       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  6.       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  7.       success: function (res) {
  8.         var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  9.         //上传图片接口
  10.         wx.uploadImage({
  11.           localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
  12.           isShowProgressTips: 1, // 默认为1,显示进度提示
  13.           success: function (res) {
  14.             var serverId = res.serverId; // 返回图片的服务器端ID
  15.           }
  16.         });
  17.       }
  18.     });
  19.   });</code>
复制代码

  通过以上代码,我们就已经把图片上传到微信服务器了,但是我们上传到微信服务器的图片只能保存3天,所以上传完之后我们要把图片下载到我们的本地服务器,这里用到微信下载多媒体接口
  
  http://file.api.weixin.qq.com/cgi-bin/media/get?
  
  access_token=ACCESS_TOKEN&media_id=MEDIA_ID
  
  其中media_id就是我们上面的serverId ,所以我们就可以把图片下载到本地了,代码如下
  1. <code class="hljs java">import org.apache.log4j.Level;
  2. import org.apache.log4j.LogManager;
  3. import org.apache.log4j.Logger;
  4. import org.apache.log4j.Priority;
  5. import org.springframework.util.StringUtils;

  6. import java.io.*;
  7. import java.net.HttpURLConnection;
  8. import java.net.URL;
  9. import java.net.URLConnection;

  10. public class DloadImgUtil {
  11. /**
  12.   * 根据内容类型判断文件扩展名
  13.   *
  14.   * @param contentType 内容类型
  15.   * @return
  16.   */
  17. public static String getFileexpandedName(String contentType) {
  18.   String fileEndWitsh = "";
  19.   if ("image/jpeg".equals(contentType))
  20.    fileEndWitsh = ".jpg";
  21.   else if ("audio/mpeg".equals(contentType))
  22.    fileEndWitsh = ".mp3";
  23.   else if ("audio/amr".equals(contentType))
  24.    fileEndWitsh = ".amr";
  25.   else if ("video/mp4".equals(contentType))
  26.    fileEndWitsh = ".mp4";
  27.   else if ("video/mpeg4".equals(contentType))
  28.    fileEndWitsh = ".mp4";
  29.   return fileEndWitsh;
  30. }
  31. /**
  32.   * 获取媒体文件
  33.   * @param accessToken 接口访问凭证
  34.   * @param mediaId 媒体文件id
  35.   * @param savePath 文件在本地服务器上的存储路径
  36.   * */
  37. public static String downloadMedia(String accessToken, String mediaId, String savePath) {
  38.   try {
  39.    accessToken = WeixinUtil.getAccessToken1().getToken();
  40.   } catch (IOException e) {
  41.    e.printStackTrace();
  42.   }
  43.   String filePath = null;
  44.   // 拼接请求地址
  45.   String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
  46.   requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
  47.   try {
  48.    URL url = new URL(requestUrl);
  49.    HttpURLConnection conn = (HttpURLConnection) url.openConnection();
  50.    conn.setDoInput(true);
  51.    conn.setRequestMethod("GET");

  52.    if (!savePath.endsWith("/")) {
  53.     savePath += "/";
  54.    }
  55.    // 根据内容类型获取扩展名
  56.    String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));
  57.    // 将mediaId作为文件名
  58.    filePath = savePath + mediaId + fileExt;
  59.    BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
  60.    FileOutputStream fos = new FileOutputStream(new File(filePath));
  61.    byte[] buf = new byte[8096];
  62.    int size = 0;
  63.    while ((size = bis.read(buf)) != -1)
  64.     fos.write(buf, 0, size);
  65.    fos.close();
  66.    bis.close();

  67.    conn.disconnect();
  68.    String info = String.format("下载媒体文件成功,filePath=" + filePath);
  69.    System.out.println(info);
  70.   } catch (Exception e) {
  71.    filePath = null;
  72.    String error = String.format("下载媒体文件失败:%s", e);
  73.    System.out.println(error);
  74.   }
  75.   return filePath;
  76. }
  77. }
  78. </code>
复制代码

  这样就完成了js-sdk图片上传下载了。
  
  感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关帖子

发表于 2017-1-17 17:35:22 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
点评 ( 1 ) 收起 / 展开点评

心如善水 2017年01月17日 22:07 详情 回复

学习

使用道具 举报

回复

发表于 2017-1-17 22:07:55 | 显示全部楼层
学习
点评 ( 1 ) 收起 / 展开点评

心如善水 2017年01月18日 13:53 详情 回复

学习

使用道具 举报

回复

发表于 2017-1-18 13:53:29 | 显示全部楼层
学习
使用道具 举报

回复

发表于 2017-1-19 18:27:52 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老会员的份上回复一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部