THINKPHP5+微信公眾號多圖片上傳預覽
阿新 • • 發佈:2019-01-09
THINKPHP5+微信公眾號多圖片上傳預覽
1.首先整合JSSDK
在extend目錄下建立org/wechant資料夾,新建Jssdk.php,將下面的程式碼放進去,在統計目錄下建立access_token.php和jsapi_ticket.php,用來存放微信accesstoken以及ticket;
<?php namespace org\wechat; class JSSDK { private $appId; private $appSecret; private $path; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; $this->path = __DIR__.DS; } public function getSignPackage($url) { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要動態獲取,不能 hardcode. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 這裡引數的順序要按照 key 值 ASCII 碼升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } private function getJsApiTicket() { // jsapi_ticket 應該全域性儲存與更新,以下程式碼以寫入到檔案中做示例 $data = json_decode($this->get_php_file("jsapi_ticket.php")); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企業號用以下 URL 獲取 ticket // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken"; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $this->set_php_file("jsapi_ticket.php", json_encode($data)); } } else { $ticket = $data->jsapi_ticket; } return $ticket; } public function getAccessToken() { // access_token 應該全域性儲存與更新,以下程式碼以寫入到檔案中做示例 $data = json_decode($this->get_php_file("access_token.php")); if ($data->expire_time < time()) { // 如果是企業號用以下URL獲取access_token // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret"; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $this->set_php_file("access_token.php", json_encode($data)); } } else { $access_token = $data->access_token; } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); // 為保證第三方伺服器與微信伺服器之間資料傳輸的安全性,所有微信介面採用https方式呼叫,必須使用下面2行程式碼開啟ssl安全校驗。 // 如果在部署過程中程式碼在此處驗證失敗,請到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別檔案。 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } private function get_php_file($filename) { return trim(substr(file_get_contents($this->path . $filename), 15)); } private function set_php_file($filename, $content) { $fp = fopen($this->path.$filename, "w"); fwrite($fp, "<?php exit();?>" . $content); fclose($fp); } }
html頁面
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>呂太公</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="__ROOT__/static/api/css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="__ROOT__/static/api/css/public.css"/> </head> <style> body{ background-color: #FFFFff; } textarea{ font-size: 15px; margin-top: 10px; } img{ width: 98px; } </style> <body> <!--頭部--> <div class="tou"> <header id="header" class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">髮圈子資訊</h1> </header> </div> <div> <form method="post" enctype="multipart/form-data"> <div> <textarea id="textarea" rows="5" name="content" placeholder="請輸入內容"></textarea> </div> <div style="margin-top: -26px;"> <div id="pox"> <img class="sc" name="image" style="width: 80px;height: 80px;" src="__ROOT__/imgs/shangchuan.png"> </div> <div id="dd"></div> <button type="submit" class="mui-btn mui-btn-warning" style="width: 100%;">發表</button> </div> </form> </div> <script src="__ROOT__/static/api/js/mui.min.js"></script> <script type="text/javascript" src="__ROOT__/static/api/js/jquery.min.js" ></script> <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script type="text/javascript"> mui.init(); $(function(){ //選擇相應的等級後傳送請求從後臺後去相應等級提升條件 //ajax $("select").change(function(){ console.log($(this).val()); }); $.ajax({ type:"post", url:"{:url('api/user/getSignPackage')}",//自己填寫請求地址 data:{ "url" : location.href.split('#')[0] }, success:function(result){ console.log(JSON.parse(result)); var resr = JSON.parse(result); wx.config({ // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。 debug: false, // 必填,公眾號的唯一標識 appId: resr.appId, // 必填,生成簽名的時間戳 timestamp:""+resr.timestamp, // 必填,生成簽名的隨機串 nonceStr:resr.nonceStr, // 必填,簽名,見附錄1 signature:resr.signature, // 必填,需要使用的JS介面列表,所有JS介面列表見附錄2 jsApiList : ["chooseImage", "previewImage", "uploadImage", ] }); } }) wx.error(function(resf) { alert("出錯了:" + res.errMsg);//這個地方的好處就是wx.config配置錯誤,會彈出視窗哪裡錯誤,然後根據微信文件查詢即可。 }); wx.ready(function() { wx.checkJsApi({ jsApiList : [ "chooseImage", "previewImage", "uploadImage",], success : function(resa) { } }); var imgs = new Array(); $('.sc').click(function () { var that = this; var num = 1; var name = $(that).attr("name");; num = $(that).attr("data-id"); wx.chooseImage({ count:num, sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標籤的src屬性顯示圖片 for (var i=0;i<localIds.length;i++){ var im = "<img src='"+localIds[i]+"' style='width: 60px;' />"; $(that).before(im); wx.uploadImage({ localId: localIds[i], // 需要上傳的圖片的本地ID,由chooseImage介面獲得 isShowProgressTips: 1, // 預設為1,顯示進度提示 success: function (res) { $(that).after('<input type="hidden" name="'+name+'[]" value="'+res.serverId+'" />'); }, fail: function (error) { alert('上傳錯誤,請稍候重試!', 'text'); } }); } } }); }); }) }) </script> </body> </html>
後端獲取微信伺服器圖片並儲存
//新增朋友圈 public function add_pyq(){ $user = Session::get('user'); if(request()->post()){ if(input('post.content') == ''){ $this->error('請輸入內容'); } $data = array( 'member_id'=>$user['member_id'], 'content'=>input('post.content'), 'status'=>0, 'add_time'=>date('Y-m-d H:i:s'), ); $res = Db::name('friend_moments')->insertGetId($data); $images = $_POST['image']; $sys = Db::name('wxsystem')->where('id',1)->find(); //例項化Jssdk類 $jssdkObj = new Jssdk($sys['appid'], $sys['appscrect']); //獲取token $access_token = $jssdkObj->getAccessToken(); $path = ROOT_PATH . 'public' . DS . 'uploads'. DS . 'friend'; if(!empty($_POST['image'])){ foreach($images as $y){ //根據token獲取圖片資訊 $str = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=$access_token&media_id=$y"; $a = file_get_contents($str); // dump($a);die; $file_name =uniqid().".jpg"; $resource = fopen($path.'/'.$file_name , 'w+'); fwrite($resource, $a); fclose($resource); Db::name('friend_moments_images')->insert(array('moments_id'=>$res,'image_url'=>$file_name)); // $image_y[] =$file_name; } } $this->success('釋出成功,稽核通過後即可在朋友圈首頁顯示','friend/index'); }else{ return $this->fetch(); } }
獲取簽名信息
public function getSignPackage() {
$sys = Db::name('wxsystem')->where('id',1)->find();
$jssdkObj = new Jssdk($sys['appid'], $sys['appscrect']);
$url = input('post.url');
$signPackage = $jssdkObj->getSignPackage($url);
return json_encode($signPackage);
}
注意:後端操作和獲取簽名信息都需要在控制器引入Jssdk類;即:use extend\org\Jssdk;