调用微信JS-SDK接口上传图片

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

微信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. }

保存图片到本地服务器上，即可：