公众号开发群发消息接口实现时,如果群发的是图片消息则还需要获取图片的 media_id ,在开放文档里介绍说可以通过 素材管理接口获取 media_id ,素材管理接口确实可以获取到media_id,不过这里要分享的是通JS-SDK的图片上传接口来获取 media_id。
(不过通过JS-SDK的图片上传接口上传的图片有效期是3天,不是永久的)
前面分享过通过JS-SDK实现分享以及拍照等功能,所以,控制器的代码就不拿上来了,下面直接上视图页面代码:
<!DOCTYPE html> <html> <head> <title>公众号JS-SDK上传图片</title> <meta charset="utf-8"> <mate name="viewpoint" content="inital-scale=1.0;width=device-width"> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> </head> <body> <!-- <p>{$title}</p> <p>{$description}</p> <p>{$url}</p> <p><img src="{$thumb}"></p> --> <script type="text/javascript"> wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '{$appid}', // 必填,公众号的唯一标识 timestamp: {$time}, // 必填,生成签名的时间戳 nonceStr: '{$nonceStr}', // 必填,生成签名的随机串 signature: '{$signature}',// 必填,签名 jsApiList: [ 'chooseImage', 'uploadImage', ] // 必填,需要使用的JS接口列表 }); wx.ready(function(){ }); function show(){ //相册 wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 wx.uploadImage({ localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID var res = document.getElementById("res"); res.innerHTML = '上传图片的media_id:'+serverId; alert(serverId) } }); } }); } wx.error(function(res){ }); </script> <div style=" width: 100%;height: 80px;"><button style="display: block;margin: 0 auto;width: 10%;" onclick="show();">上传图片</button></div> <div id="res"></div> </body> </html>
【tips】:
1、这里虽然没有放控制器的代码,带JS-SDK接口实现的步骤基本是一样的,不太懂的可以看看前面分享的关于JS-SDK接口实现的相关文章。
视图代码中需要重点关注的是 wx.config 中的几个配置变量,这几个配置变量的值的获取方法,在前面的JS-SDK文章中有。(配置变量:appId、timestamp、nonceStr、signature)
2、图片上传然后获取 media_id 主要用到了两个JS-SDK 接口'chooseImage', 'uploadImage',所以在接口使用列表 jsApiList 中必须把 这两个接口加上去。
3、接下来就是接口的具体实现了,show 方法。
通过 uploadImage 接口上传图片可以获取到图片的 media_id ,但是上传图片还得利用 chooseImage 接口获取到 localId ,然后 uploadImage 才能把图片上传上去。
4、JS_SDK 中的接口实现后要通过微信二维码扫描体验,不能通过网页浏览器访问体验。
(把控制器中方法的完整访问 url 生成二维码,然后微信扫描访问)
JS-SDK上传图片获取media_id结果: