微信JSSDK接口 - 图片上传、下载
刚刚做微信上传、下载图片功能的开发,网上得知微信不支持网页上传图片的功能。但是,微信JS-SDK说明文档提供一系列接口用来实现图片上传、预览及下载,其中uploadImage接口用于上传图片,一般和chooseImage接口配合使用,previewImage接口用于预览图片。
由于uploadImage一次只能上传一张图片,因此当用户选择多张图片时,需等前一张图片上传之后再调用该接口,也就是说,如果想要上传多张图片,需要将并行上传改成串行。
具体步骤如下: 1、页面加载时需要得到appId、timestamp、nonceStr、signature四个值用来进行权限验证,验证通过后才能上传图片。建议值从后台传入,具体方法参照"微信JSSDK接口-生成签名" 2、点击页面"上传图片"按钮调用uploadImg方法 (1)首先,调用chooseImage接口返回本地图片的localIds列表 (2)之后,调用uploadImage接口返回图片的服务器端serverIds列表 3、得到图片的服务器端serverIds,传到后台用来获取图片(在form表单中设置隐藏input标签,将serverIds值传到后台) 4、后台根据serverIds以及access_token(生成签名时的所使用的调用接口凭证),调用微信"下载多媒体文件"接口获取图片做后续备份、存储 |
图片上传
<!DOCTYPE html>
<html>
<head>
<!--如果页面启用了HTTPS,请务必额外引用第二条JS-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<title>上传图片</title>
</head>
<body>
<div class="weui_uploader_input_wrp">
<input type="button" οnclick="uploadImg()" value="上传图片">
</div>
<g:form name="myForm" action="myAction">
<input type="hidden" name="serverIds" id="serverIds" value=""/>
<input type="button" value="提交"/>
</g:form>
</body>
</html>
<script> var appId = "" // 微信平台唯一标识 var timestamp = "" // 生成signature所使用的timestamp var nonceStr = "" // 生成signature所使用的nonceStr var signature = "" // 数字签名,生成参照:微信JSSDK接口 - 生成签名 // 后台生成的signature所使用的url应该和它相同 // alert(location.href.split('#')[0]) wx.config({ debug: false, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ "chooseImage", "previewImage", "uploadImage", "downloadImage" ] }); var serverIds = "" function uploadImg() { wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表 syncUpload(localIds); // localId可作为img标签的src属性显示图片 } }); } function syncUpload(localIds) { var localId = localIds.pop(); wx.uploadImage({ localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端serverId serverIds = serverIds + serverId + ","; $("#serverIds").val(serverIds); if(localIds.length > 0){ syncUpload(localIds); } else { alert("图片上传成功") } } }); }; </script>
图片下载
def uploadImage(String accessToken, String server_id)
{
String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=${accessToken}&media_id=${server_id}"
URL url = new URL(requestUrl)
HttpURLConnection conn = (HttpURLConnection) url.openConnection()
conn.setDoInput(true)
conn.setRequestMethod("GET")
def fileType = conn.getHeaderField("Content-Type").split("/")[-1]
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream())
File tempFile = new File("images/wxTempFile.${fileType}")
FileOutputStream fos = new FileOutputStream(tempFile)
byte[] buf = new byte[1024 * 1024]
int size = 0
while ((size = bis.read(buf)) != -1)
{
fos.write(buf, 0, size)
}
}