微信JS图片上传与下载功能--微信JS系列文章（三）

概述

　　在前面的文章微信JS初始化-- 微信JS系列文章（一）中已经介绍了微信JS初始化的相关工作，接下来本文继续就微信JS的图片上传功能进行描述，供大家参考。

图片上传

$(function(){
    var signUrl = location.href.split(\'#\')[0];
    signUrl = encodeURIComponent(signUrl);
    $.ajax({
        type:"POST",
        url: webPath.webRoot + "/wxsdk/getWeixinJsConfig.json",
        data:{\'signUrl\':signUrl},
        dataType:\'json\',
        success:function(msg) {
            if(msg.result == "success"){
                var weixinJsSdkConfig = msg.weixinJsSdkConfig;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: weixinJsSdkConfig.appId, // 必填，公众号的唯一标识
                    timestamp: weixinJsSdkConfig.timestamp, // 必填，生成签名的时间戳
                    nonceStr: weixinJsSdkConfig.nonceStr, // 必填，生成签名的随机串
                    signature: weixinJsSdkConfig.signature,// 必填，签名，见附录1
                    jsApiList: [\'chooseImage\', \'uploadImage\'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            }else{
                showError("初始化失败，请稍后再试。");
            }
        },
        error:function(XMLHttpRequest, textStatus) {
            if (XMLHttpRequest.status == 500) {
                var result = eval("(" + XMLHttpRequest.responseText + ")");
                showError(result.errorObject.errorText);
                return false;
            }
        }
    });
});

function chooseImage(count){
    var serverIdArray = null;
    wx.chooseImage({
        count: count, // 默认9
        sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            if(!isEmpty(localIds)){
                var len = localIds.length;
                serverIdArray = new Array(len);
                for(var i=0;i<len;i++){
                    wx.uploadImage({
                        localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            serverIdArray[i] = res.serverId; // 返回图片的服务器端ID
                        }
                    });
                }
            }
        }
    });

    return serverIdArray;
}

//判空
function isEmpty(obj){
    if(obj==undefined || obj==null){
        return true;
    }else{
        return false;
    }
}

图片下载

　　调用微信JS上传完图片后，微信服务器会返回一个图片的服务器端ID（即为media_id），通过这个ID即可以把图片下载到自己的服务器保存。下载逻辑代码如下：

@Override
public String downloadImgFromWeixin(String outputPath, String mediaId) {
    try {
        Map<String, String> param = new HashMap<String, String>();
        param.put("access_token", getAccessToken().trim());
        param.put("media_id", mediaId);
        return WeixinWebUtil.doGet("https://api.weixin.qq.com/cgi-bin/media/get", param, "UTF-8", 3000, 3000, outputPath);
    } catch (IOException e) {
        logger.error("通过media_id:" + mediaId + "下载图片失败");
        throw new BusinessException(ResGlobal.ERRORS_USER_DEFINED, new String[]{e.getMessage()});
    }
}

欢迎转载，转载必须标明出处

秒客网

微信JS图片上传与下载功能--微信JS系列文章（三） - RexFang

微信JS图片上传与下载功能--微信JS系列文章（三）

相关文章