公众号开发群发消息接口实现时,如果群发的是图片消息则还需要获取图片的 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结果:

