微信上传图片

第一步：登录微信公众平台。

设置——公众号设置——得到原始ID 设置——公众号设置——功能设置——配置JS接口安全域名

第二步：引入JS文件。

在需要调用JS接口的页面引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js 如果你的页面启用了https，引入JS文件 ：https://res.wx.qq.com/open/js/jweixin-1.0.0.js

第三步：通过config接口注入权限验证配置

var pathName = window.location.pathname + window.location.search + window.location.hash; var sendData = { "param": JSON.stringify({ "ghId": "第一步得到的原始ID", "url": "第一步配置的域名"+ pathName }) }; ece.post("接口地址", sendData).suc(function (result) { if(0 == result.code){ //所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用 wx.config({ debug: false, appId: result.data.appId, timestamp: result.data.timestamp, nonceStr: result.data.nonceStr, signature: result.data.signature, jsApiList:[//需要使用的JS接口列表 'chooseImage', 'uploadImage' ] }); } }).err(function (result) { });

第四步：通过ready接口处理成功失败验证

//单张图片上传 wx.ready(function(){ $("#infoHead").click(function(){ wx.chooseImage({//选择图片 count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { wx.uploadImage({//上传图片 localId: res.localIds[0], isShowProgressTips: 1, success: function (res) { // 返回图片的服务器端ID var serverId = res.serverId; //为了用户体验，先直接读取，因为从服务器读取需要一定时间。 //之后服务器读取图片完成替换。 ---------------------------------------- //直接读取图片,有效期3天. $(".vipimg").attr("src", res.localIds); //从服务器读取图片. ece.get("接口" + serverId).suc(function (res) { if('0' === res.code){ $(".vipimg").attr("src", res.data); } }); }); }); } }); } }) }); wx.error(function (res) { console.log(res.errMsg); });

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

//多张图片上传 wx.ready(function(){ $('#filePicker').on('click', function () { wx.chooseImage({ count: 6, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { var localIds = res.localIds; syncUpload(localIds); } }); }); }); var syncUpload = function(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID //其他对serverId做处理的代码 if(localIds.length > 0){ syncUpload(localIds); } } }); };

备注：目前只支持一次上传一张，多张图片需等前一张图片上传之后再调用该接口，也就是说，如果想要上传多张图片，需要将之前并行上传改成串行。

补充——微信sdk坑：调用微信sdk的时候，如果上个页面传递过来的参数过长会影响当前页面微信sdk调用失效。

参考资料： https://leo108.com/pid-2069.asp http://www.2cto.com/weixin/201509/444181.html http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html