最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存,等到最后的提交,在从微信提供的接口中下载图片到本地服务器中保存!

微信JS-SDK说明文档

概述

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

JSSDK使用步骤

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用摇一摇周边功能,请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: '', // 必填,公众号的唯一标识

timestamp: , // 必填,生成签名的时间戳

nonceStr: '', // 必填,生成签名的随机串

signature: '',// 必填,签名,见附录1

jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

步骤四:通过ready接口处理成功验证

wx.ready(function(){

// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

});

步骤五:通过error接口处理失败验证

wx.error(function(res){

// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

});

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

1.success:接口调用成功时执行的回调函数。

2.fail:接口调用失败时执行的回调函数。

3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。

4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。

5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

调用成功时:"xxx:ok" ,其中xxx为调用的接口名

用户取消时:"xxx:cancel",其中xxx为调用的接口名

调用失败时:其值为具体错误信息

图像接口

拍照或从手机相册中选图接口

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

success: function (res) {

var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

}

});

预览图片接口

wx.previewImage({

current: '', // 当前显示图片的http链接

urls: [] // 需要预览的图片http链接列表

});

上传图片接口

wx.uploadImage({

localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得

isShowProgressTips: 1, // 默认为1,显示进度提示

success: function (res) {

var serverId = res.serverId; // 返回图片的服务器端ID

}

});

备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id。

下载图片接口

wx.downloadImage({

serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得

isShowProgressTips: 1, // 默认为1,显示进度提示

success: function (res) {

var localId = res.localId; // 返回图片下载后的本地ID

}

});

根据接口文档的说明:

引入JS后,进行权限验证配置,相关的参数值通过Ajax后台请求获取到:

  1. $.ajax({
  2. url: "test.ashx",
  3. data: {
  4. name: "GetWxJsApi",
  5. curUrl: url
  6. },
  7. type: 'post',
  8. dataType: "json",
  9. success: function (data) {
  10. if (data.success == "1") {
  11. var timestamp = data.timestamp;
  12. var noncestr = data.noncestr;
  13. var signature = data.signature;
  14. //通过config接口注入权限验证配置
  15. wx.config({
  16. debug: false,
  17. appId: data.appId,
  18. timestamp: timestamp.toString(),
  19. nonceStr: noncestr,   //生成签名的随机串
  20. signature: signature,  //签名
  21. jsApiList: ['chooseImage', 'uploadImage', 'downloadImage']
  22. });
  23. } else {
  24. alert(data.error);
  25. }
  26. }
  27. });

验证通过后,可以调用手机选择图片接口

  1. //拍照或从手机相册中选图接口
  2. function wxChooseImage() {
  3. wx.chooseImage({
  4. count: 1,
  5. needResult: 1,
  6. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  7. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  8. success: function (data) {
  9. localIds = data.localIds[0].toString(); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  10. if (rh.tostr(localIds)) {
  11. wxuploadImage(localIds);
  12. }
  13. },
  14. fail: function (res) {
  15. alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
  16. }
  17. });
  18. }

选择图片成功后,同时调用上传图片接口,加载图片,主要要保存下mediaId字段

   备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器!

  1. //上传图片接口
  2. function wxuploadImage(e) {
  3. wx.uploadImage({
  4. localId: e, // 需要上传的图片的本地ID,由chooseImage接口获得
  5. isShowProgressTips: 1, // 默认为1,显示进度提示
  6. success: function (res) {
  7. mediaId = res.serverId; // 返回图片的服务器端ID
  8. if (rh.tostr(mediaId)) {
  9. $(".myimg").attr("src", localIds);
  10. }
  11. },
  12. fail: function (error) {
  13. picPath = '';
  14. localIds = '';
  15. alert(Json.stringify(error));
  16. }
  17. });
  18. }

最后正式入库的时候,要通过mediaId从腾讯服务器中,下载到本地服务器:

  1. $.ajax({
  2. url: "test.ashx",
  3. data: {
  4. name: "getPicInfo",
  5. media: $.trim(mediaId)
  6. },
  7. type: "Get",
  8. dataType: "text",
  9. success: function (data) {
  10. picPath = data;  //picPath 取得图片的路径
  11. },
  12. error: function (XMLHttpRequest, textStatus, errorThrown) {
  13. alert("提交失败" + textStatus);
  14. }
  15. });

通过访问后台接口,同时也通过微信接口

  1. var url = string.Format("https://api.weixin.qq.com/cgi-bin/media/get?access_token={0}&media_id={1}", token, media);
  2. var PicPath = Common.GetWxPic(url, "").ToString();
  1. <pre name="code" class="csharp"> public static string GetWxPic(string url,string data)
  2. {
  3. string path = "";
  4. try
  5. {
  6. ServicePointManager.Expect100Continue = false;
  7. ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);
  8. HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (data == "" ? "" : "?" + data));
  9. request.Method = "GET";
  10. using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
  11. {
  12. if(response.StatusCode  == HttpStatusCode.OK)
  13. {
  14. string fileName = Common.RightStr(response.Headers["Content-disposition"],"filename=",false).Replace("\"","");
  15. path = "/uploadfile/" + fileName;
  16. Stream responseStream = response.GetResponseStream();
  17. BinaryReader br = new BinaryReader(responseStream);
  18. FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(path), FileMode.Create, FileAccess.Write);
  19. const int buffsize = 1024;
  20. byte[] bytes = new byte[buffsize];
  21. int totalread = 0;
  22. int numread = buffsize;
  23. while (numread != 0)
  24. {
  25. // read from source
  26. numread = br.Read(bytes, 0, buffsize);
  27. totalread += numread;
  28. // write to disk
  29. fs.Write(bytes, 0, numread);
  30. }
  31. br.Close();
  32. fs.Close();
  33. response.Close();
  34. }
  35. else
  36. {
  37. response.Close();
  38. path = "";
  39. }
  40. }
  41. }
  42. catch (Exception)
  43. {
  44. path = "";
  45. }
  46. return path;
  47. }

保存图片到本地服务器上,即可:

调用微信JS-SDK接口上传图片的更多相关文章

  1. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  2. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  3. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...

  4. 同一个界面内取微信的OPENID和调用微信的分享接口

    步骤如下,1:判断URL是否有CODE参数传入,没有则拼接那个微信跳转连接,然后redirect2:有CODE传入,调用微信接口,根据code获取openid和access_token,注意这一步取到 ...

  5. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  6. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  7. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  8. 微信JS SDK使用权限签名算法

    jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒, ...

  9. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  10. 微信开发(2):微信js sdk分享朋友圈,朋友,获取config接口注入权限验证(转)

    进行微信开发已经一阵子了,从最初的什么也不懂,到微信授权登录,分享,更改底部菜单,素材管理,等. 今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入. 官方文档走一下简单说:四步 ...

随机推荐

  1. HDOJ.2111 Saving HDU (贪心)

    Saving HDU 点我挑战题目 题意分析 给出来背包容量v和物品数量n,接下来n行分别给出每个商品单位体积的价值和物品总共的体积(注意是单位体积,不是每个物品).求出最多能装多少价值的物品. 典型 ...

  2. PowerDesigner 快捷键

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  3. SELECT LAST_INSERT_ID() 的使用和注意事项

    SELECT LAST_INSERT_ID() 的使用和注意事项 尊重个人劳动成果,转载请注明出处: http://blog.csdn.net/czd3355/article/details/7130 ...

  4. C语言超大数据相加计算整理

    在做ACM 1002题时,整理得到. #include<stdio.h>#include<string.h>#define MAX 1000void zero(char *s, ...

  5. 轮廓算法的结果验证工具/How to validate the outline output

    因为轮廓算法的结果通过直接观察输出很难判断结果的正确性. 但是如果把输入和输出同时绘制出来,用眼睛判别则相对简单许多. 输入建筑的文件内容格式为,粗体格式为建筑高度: 10 110 5020 60 7 ...

  6. android Handler post sendMessage

    Handler 为Android操作系统中的线程通信工具,包为android.os.Handler. 与Handler绑定的有两个队列,一个为消息队列,另一个为线程队列.Handler可以通过这两个队 ...

  7. [freemarker篇]06.超级强大的自定义指令

    Freemarker的自定义指令是很强大的,非常强大,在之后的教程中我会简单的做一个示例,让大家对其有所了解!如果做Freemarker编程,请好好看看API手册,可以说里面的内容很多!也是一门独立的 ...

  8. 动态规划小结 - 一维动态规划 - 时间复杂度 O(n),题 [LeetCode] Jump Game,Decode Ways

    引言 一维动态规划根据转移方程,复杂度一般有两种情况. func(i) 只和 func(i-1)有关,时间复杂度是O(n),这种情况下空间复杂度往往可以优化为O(1) func(i) 和 func(1 ...

  9. 数据存储之 SharedPreference 共享参数 (转)

        在上一讲中,我们学习了如何将数据存储在SD卡中[数据存储之File文件存储 [即SD卡的写入与读取]],这是一种存储方式,这一讲我们来学习一下使用SharedPreferences存储数据. ...

  10. HNOI 2016 地图

    [题目描述] Hoshizora Rin是个特别好动的少女. 一天Rin来到了一个遥远的都市.这个都市有N个建筑,编号从1到N,其中市中心编号为1,这个都市有M条双向通行的街道,每条街道连接着两个建筑 ...