微信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" onclick="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) } }