简单记录

微信jssdk上传图片

时间 ：2019-6-21  作者： thtomatic  分类： JavaScript   评论: [ 0 ] 条  浏览: [ 828 ] 次

本代码在Tp3.2.3上运行成功，若是其他框架 文中的PHP代码可能不会适用，HTML和Javascript代码不受影响，仅作参考！

Html代码：

<div class="yxg-margin-horizontal-sm">
        <div class="list-textarea clearfix">
            <textarea class="yxg-initiate-content " cols="50" placeholder="请详细描述你所遇到的问题（不少于20个字），以便TA能够详细了解你的问题，给出针对性的回答。" rows="10" id="content"></textarea>
            <div class="col-xs-3">
                <img src="/bootstrap/img/img-tjtp.png" style="margin: 5px auto" class="img-responsive yxg-initiate-img " alt="" onclick="add_imgs()">

            </div>

            <div class="row clearfix" id="WxImgBox">

            </div>

        </div>

    </div>

Javascript代码:

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    var wx_ok=false;
    var conf = JSON.parse('{$wx_js_sign|json_encode=###,true}');
    conf.debug = false;
    //初始化JS-SDK
    JsSdk_Config(conf);
    //检测 JS-SDK 能否正常使用
    wx.ready(function () {wx_ok=true;})
function JsSdk_Config(conf) {
    wx.config({
        debug: conf.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: conf.appId, // 必填，公众号的唯一标识
        timestamp: conf.timestamp, // 必填，生成签名的时间戳
        nonceStr: conf.nonceStr, // 必填，生成签名的随机串
        signature: conf.signature,// 必填，签名
        jsApiList: ['startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ']
    });
}
var wechat_img_id = new Array();
function add_imgs(count = 9,sizeType=['original', 'compressed'],sourceType=['album', 'camera']) {
    if(!wx_ok)
    {
        showMsg('微信还没准备好');
        return;
    }
    wx.chooseImage({
        count: count, // 默认9
        sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有
        sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            Wechat_Upload(localIds);
        }
    });
}

//微信端上传图片
function Wechat_Upload(localIds) {
    if (!localIds.length) {
        return;
    } else {
        if(wechat_img_id.length < 11)
        {
            var localId = localIds.pop();remove_img("sss")
            wx.uploadImage({
                localId: localId,
                isShowProgressTips: 1,
                success: function(res_data) {
                    var serverId = res_data.serverId;
                    wechat_img_id.push(serverId);
                    var that_box = $('#WxImgBox');
                    var html='<div class="col-xs-3 remove_class" onclick="remove_img(\''+serverId+'\')"><img src="'+ localId+'" style="margin: 5px auto" class="img-responsive yxg-initiate-img " alt="" ></div>';
                    that_box.append(html);
                    Wechat_Upload(localIds);
                }
            });
        }else{
            showMsg('最多上传11张图片');
        }

    }
}

//移除上传的图片
function remove_img(sid) {
    $('.remove_class').on('click',function () {
        $(this).remove();
    })
    removeByValue(wechat_img_id,sid);
}

//删除数组中的值
function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}
</script>

后端使用PHP:

用到一个类：TPWechat(点击下载)

    protected function Wechat_img($img)
    {
        $options=array('token'=>$this->_config['weixin_token'],'encodingaeskey'=>$this->_config['weixin_encodingaeskey'],'appid'=>$this->_config['weixin_appid'],'appsecret'=>$this->_config['weixin_secret']);
        $wechatObj=new \Org\Net\TPWechat($options);
        $w_img=array();
        try {
            foreach($img AS $k => $v) {
                $media_file=$wechatObj->getXhjMedia($v,false);
                if($media_file!==false){
                    $img_thumb=imgThumb($media_file,300,500);
                    $w_img[]=array("type"=>"image","img"=>$media_file,"thumb"=>$img_thumb);
                }
            }
            $data['status'] = 1;
            $data['data'] = $w_img;

        } catch (Exception $err) {
            $data['status'] = 0;
            $data['info'] = '文件错误：'.$err->getMessage();
        }
        return $data;
    }

期间遇到了一个坑，就是使用'chooseImage'方法后得到localIds再用for循环执行'uploadImage'的方法导致每次都是第一张图片在上传，因为异步的问题所以js代码改成了 最后这个样子 解决了这个异步问题

• 赞4
• 
• 踩0