ThinkPHP微信实例——JSSDK图像接口多张图片上传下载并将图片流写入本地

来源：互联网发布：窗帘算法编辑：程序博客网时间：2024/04/28 00:37

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>发布图片</title><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css"></head><body><p>最多可添加9张作品</p><input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />  <div class="imglist"></div><input type="hidden" id="img_str" name="img_str"> <a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a> <div class="sb">发布</div><script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>  wx.config({debug: false,appId: '{$signPackage["appid"]}',timestamp: {$signPackage["timestamp"]},nonceStr: '{$signPackage["noncestr"]}',signature: '{$signPackage["signature"]}',jsApiList: [// 所有要调用的 API 都要加到这个列表中'chooseImage','previewImage','uploadImage','downloadImage']});wx.ready(function () {// 5.3 上传图片$('.uploadImage').on('click', function () {wx.chooseImage({success: function (res) {var localIds = res.localIds;syncUpload(localIds);}});});var syncUpload = function(localIds){var localId = localIds.pop();wx.uploadImage({localId: localId,isShowProgressTips: 1,success: function (res) {    var serverId = res.serverId; // 返回图片的服务器端ID            var str = $('#img_str').val()+serverId+',';            $('.imglist').append("<img src='"+localId+"' />");            $('#img_str').val(str);    //其他对serverId做处理的代码    if(localIds.length > 0){syncUpload(localIds);    }            if($('.imglist img').size() >= 9) {                $("#upload_button").hide();            }},fail: function (res) { alert(JSON.stringify(res)); }    });};});</script><script>  $(".sb").click(function(){      var imglist = $(".imglist").html();           if(imglist == "" || imglist == null) {         alert("请添加图片");           return false;      } else {          if($(".imglist").find('img').size() >9) {              alert("图片只允许上传9张！");              return false;          }  var img_str = $('#img_str').val();      }      $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){          window.location.href = "__URL__/test";      });  });</script></body></html>

后台处理 testController.php

    public function test() {$signPackage = $this->getSignPackage();$this->assign('signPackage', $signPackage);$this->display('test');    }

    public function wxupload() {header('Content-type:application/json;chartset=utf-8');$img_str = I('post.img_str', '', 'string');      $uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径     $uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);$savepath = '/Public/Upload/' . date('Y-m-d').'/'; $img_str = rtrim($img_str, ',');$img_arr = explode(',', $img_str);$str = ''; //sql语句字符串$imgs = array();foreach($img_arr as $v) {$imgs[] = $this->doWechatPic($v);}$str = ''; //sql语句字符串foreach($imgs as $v) {$str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";}$sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');$res = M()->query($sql);if($res) { $data = array('errcode' => 0, 'msg' => '成功！');} else { $data = array('errcode' => 1, 'msg' => '失败！');}exit( JSON($data));    }/*  * 从微信服务器获取图片流  */  public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn          $media_id = $serverId;//提交过来的serverId即$media_id            $access_token = $this->_get_wx_access_token_address( false );//获取access_token值              $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";          $filebody = file_get_contents($pic_url);//通过接口获取图片流                  $filename = uniqid().'.jpg';            //定义图片名字及格式          return $this->saveFile($filename, $filebody);  }    /*  * 定义文件路径，写入图片流  */  public function saveFile($filename, $filecontent){      $uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径     $uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);    $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层      $savepath = '.'.$upload_dir.'/'.$filename;               if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片          return $upload_dir."/".$filename;//返回图片路径      }else{          exit(JSON('save failed'));      }        }

需要注意的是 access_token，signPackage参数不能错误

0 0