调用微信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后台请求获取到：

    $.ajax({url: "test.ashx",data: {name: "GetWxJsApi",curUrl: url},type: 'post',dataType: "json",success: function (data) {if (data.success == "1") {var timestamp = data.timestamp;var noncestr = data.noncestr;var signature = data.signature;//通过config接口注入权限验证配置wx.config({debug: false,appId: data.appId,timestamp: timestamp.toString(),nonceStr: noncestr,   //生成签名的随机串signature: signature,  //签名jsApiList: ['chooseImage', 'uploadImage', 'downloadImage']});} else {alert(data.error);}}});

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

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

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

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

//上传图片接口function wxuploadImage(e) {wx.uploadImage({localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {mediaId = res.serverId; // 返回图片的服务器端IDif (rh.tostr(mediaId)) {$(".myimg").attr("src", localIds);}},fail: function (error) {picPath = '';localIds = '';alert(Json.stringify(error));}});}

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

$.ajax({url: "test.ashx",data: {name: "getPicInfo",media: $.trim(mediaId)},type: "Get",dataType: "text",success: function (data) {picPath = data;  //picPath 取得图片的路径},error: function (XMLHttpRequest, textStatus, errorThrown) {alert("提交失败" + textStatus);}});

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

var url = string.Format("https://api.weixin.qq.com/cgi-bin/media/get?access_token={0}&media_id={1}", token, media);
var PicPath = Common.GetWxPic(url, "").ToString();

<pre name="code" class="csharp">private static bool CheckValidationResult(object sender, X509Certificate certificate, X509Chain chain, SslPolicyErrors errors){return true;}  public static string GetWxPic(string url,string data){string path = "";try{ServicePointManager.Expect100Continue = false;ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (data == "" ? "" : "?" + data));request.Method = "GET";using (HttpWebResponse response = request.GetResponse() as HttpWebResponse){if(response.StatusCode  == HttpStatusCode.OK){string fileName = Common.RightStr(response.Headers["Content-disposition"],"filename=",false).Replace("\"","");path = "/uploadfile/" + fileName;Stream responseStream = response.GetResponseStream();BinaryReader br = new BinaryReader(responseStream);FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(path), FileMode.Create, FileAccess.Write);const int buffsize = 1024;byte[] bytes = new byte[buffsize];int totalread = 0;int numread = buffsize;while (numread != 0){// read from sourcenumread = br.Read(bytes, 0, buffsize);totalread += numread;// write to diskfs.Write(bytes, 0, numread);}br.Close();fs.Close();response.Close();}else{response.Close();path = "";}}}catch (Exception){path = "";}return path;}

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

完整代码下载

调用微信JS-SDK接口上传图片相关推荐

微信js sdk图片接口上传图片
开发微信平台网页不可避免的需要调用微信提供的接口.微信JS-SDK提供了方便的调用. 需要实现上传图片更换头像的功能,要用到图片相关的几个接口.根据微信开发者文档的说明,步骤一绑定域名,步骤二引入js ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
微信公众号开发自定义分享从前台到Java后台调用微信JS接口分享朋友圈
20180811写在前面的话有很多人遇到问题之后问我,结果大多数是因为配置问题,所以请详细阅读前面的配置步骤. 20181016注意事项收到反馈,之前写的接口即将废弃,源代码中的js接口需要修改, ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
Vue h5 调用微信扫码接口
需求调用微信扫码接口,然后获取扫码返回结果的url中的参数,携参跳转到其他页面 1. 安装微信js-sdk 通过yarn安装 yarn add weixin-js-sdk 通过npm安装 npm i ...
C# 调用微信公众号接口发送客服消息示例
客服消息发送比较简单注:指定openid和消息内容使用Post发送就可以,很多时候需要在触发事件或相应的情况下发送官方文档:https://mp.weixin.qq.com/wiki?t=reso ...
实战微信JS SDK开发：贺卡制作与播放（1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...
微信-js sdk invalid signature签名错误问题解决
微信-js sdk invalid signature签名错误问题解决参考文章: (1)微信-js sdk invalid signature签名错误问题解决 (2)https://www.cn ...
微信js sdk 分享失败有时候好有时候坏
微信js sdk 分享失败有时候好有时候坏用了一个www开头的域名和一个xx.com的域名两个在解析上有问题. 实践是www.xx.com的比较稳定转载于:https://www.c ...

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

调用微信JS-SDK接口上传图片相关推荐

最新文章

热门文章