微信js sdk上传多张图片

Posted 2020-09-18 小小强学习网

微信js sdk上传多张图片，微信上传多张图片

该案例已tp3.2商城为例

直接上代码：

php代码：

 public function ind(){
        $appid="11111111111111111111";
        $secret="11111111111111111111";
        $token = S(‘access_token‘);
        if (!$token) {
            $res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111&secret=11111111111111111111111111");
            $res = json_decode($res, true);
            $token = $res[‘access_token‘];
            // 注意：这里需要将获取到的token缓存起来（或写到数据库中）
            // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token，每日有次数限制
            // 通过此接口返回的token的有效期目前为2小时。令牌失效后，JS-SDK也就不能用了。
            // 因此，这里将token值缓存1小时，比2小时小。缓存失效后，再从接口获取新的token，这样
            // 就可以避免token失效。
            // S()是ThinkPhp的缓存函数，如果使用的是不ThinkPhp框架，可以使用你的缓存函数，或使用数据库来保存。
            S(‘access_token‘, $token, 3600);
        }
        $ticket = S(‘wx_ticket‘);
        if(!$ticket) {
            $tokinfo = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi");
            $tokinfo = json_decode($tokinfo, true);
            $ticket=$tokinfo[‘ticket‘];
            S(‘wx_ticket‘, $ticket, 3600);
        }
        $url = ‘http://‘.$_SERVER[‘HTTP_HOST‘].$_SERVER[‘REQUEST_URI‘];
        if($ticket){
            $timestamp = time();
            $wxnonceStr = "abcdefghijklmnopqrstuvw";
            $wxticket = $ticket;
            $wxOri = "jsapi_ticket=$wxticket&noncestr=$wxnonceStr&timestamp=$timestamp&url=$url";
            $wxSha1 = sha1($wxOri);
            $this->assign("token",$token);
            $this->assign("timestamp",$timestamp);
            $this->assign("wxnonceStr",$wxnonceStr);
            $this->assign("wxshal",$wxSha1);
        }
    }

 

模板中的js代码：

  // 微信配置
        var token="{$token}";
        var timestamp="{$timestamp}";
        var wxnonceStr = "{$wxnonceStr}";
        var wxshal = "{$wxshal}";
        wx.config({
            debug: false,
            appId: "wx978a1c1edb5fea34",
            timestamp: "{$timestamp}",
            nonceStr: "{$wxnonceStr}",
            signature: "{$wxshal}",
            jsApiList: [‘onMenuShareAppMessage‘, ‘onMenuShareTimeline‘,‘chooseImage‘,‘previewImage‘,‘uploadImage‘,‘downloadImage‘] // 功能列表，我们要使用JS-SDK的什么功能
        });
        var serverids=[];
        var leng=0;
        var syncUpload = function(localIds){
            myApp.hidePreloader();
            myApp.showPreloader();
            var localId = localIds.pop();
            wx.uploadImage({
                localId: localId,
                isShowProgressTips:0,
                success: function (res) {
                    var serverId = res.serverId; // 返回图片的服务器端ID
                    serverids.push(serverId);
                    //其他对serverId做处理的代码
                    if(localIds.length > 0){
                        syncUpload(localIds);
                    }
                    if(leng==serverids.length){
                        var json = {};
                        for(var i=0;i<serverids.length;i++)
                        {
                            json[i]=serverids[i];
                        }
                        var serids=JSON.stringify(json);
                        $.ajax({
                            type : "post",
                            url : "/H5/index/downloadMedia",
                            data : {mediaid:serids} ,
                            dataType:"json",
                            async : false,
                            success : function(response){
                                myApp.hidePreloader();
                                $.each(response.image,function (k,v) {
                                    var contentUl = SetImgBox(v);
                                    $(".img_box").append(contentUl);
                                })
                                myApp.hidePreloader();
                                alert("上传成功!");
                                //alert(response.image[0])
                                //$(".ago").attr("src",response.image[0])
                            }
                        });
                    }
                }
            });
        };
        $(function () {
            wx.ready(function () {
                // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                $("#contentid").click(function () {
                    var ileng=$("#imglength li").length;
                    var wleng=9+1-ileng;
                    var that = $(this);
                    wx.chooseImage({
                        count: wleng, // 默认9
                        sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            leng = localIds.length;
                            syncUpload(localIds); //上传代码图片就在此直接调用
                        }
                    });
                })
            })
        })

 

php 服务器接收的代码：

 public function downloadMedia() {
        $mediaId=$_POST["mediaid"];
        $appid="11111111111111111111";
        $secret="222222222222222222222222222";
        $mediaId = json_decode($mediaId);
        $token = S(‘access_token‘);
        $imgs=array();
        if (!$token) {
            $res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111111111&secret=11111111111111111111111111111");
            $res = json_decode($res, true);
            $token = $res[‘access_token‘];
            // 注意：这里需要将获取到的token缓存起来（或写到数据库中）
            // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token，每日有次数限制
            // 通过此接口返回的token的有效期目前为2小时。令牌失效后，JS-SDK也就不能用了。
            // 因此，这里将token值缓存1小时，比2小时小。缓存失效后，再从接口获取新的token，这样
            // 就可以避免token失效。
            // S()是ThinkPhp的缓存函数，如果使用的是不ThinkPhp框架，可以使用你的缓存函数，或使用数据库来保存。
            S(‘access_token‘, $token, 3600);
        }
        foreach ($mediaId as $key=>$value){
            $nfilename = date(‘YmdHis‘).get_rand_str(6);
            $day=date("Y");
            $dam=date("m");
            $updir = ‘./Public/trade/‘.$day.‘/‘.$dam.‘/‘;
            $updir2 = ‘/Public/trade/‘.$day.‘/‘.$dam.‘/‘;
            if (!is_dir($updir)){
                //第三个参数是“true”表示能创建多级目录，iconv防止中文目录乱码
                $res=mkdir(iconv("UTF-8", "GBK", $updir),0777,true);
                if (!$res){
                    $this->error = "目录 $updir 创建失败";
                    return false;
//                $this->output_error("目录 $updir 创建失败");
                }
            }
            $med=$value;
            $content = file_get_contents("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=$token&media_id=$med");
            $filename = "$updir/$nfilename.jpg";
            $file2="$updir2/$nfilename.jpg";
            file_put_contents($filename, $content);
            array_push($imgs,$file2);
        }