微信JSSDK接口 - 图片上传、下载

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

微信JSSDK接口 - 图片上传、下载

猜你喜欢