本文作者:心月

微信公众号开发——通过JS-SDK图片上传接口获取media_id

心月IT博客 2019-10-06
摘要:公众号开发群发消息接口实现时,如果群发的是图片消息则还需要获取图片的 media_id ,在开放文档里介绍说可以通过 素材管理接口获取 media_id ,素材管理接口确实可以获取到media_id,不过这里要分享的是通JS-SDK的图片上传接口来获取 media_id。

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

JS-SDK上传图片获取media_id结果


文章版权及转载声明:

作者:心月 本文地址:http://www.xinyueseo.com/other/376.html发布于 2019-10-21
文章转载或复制请以超链接形式并注明出处心月IT博客

分享到:
赞(

发表评论

快捷输入:

    评论列表 (有 0 条评论,人围观)参与讨论