一個完整的微信上傳圖片下載圖片實例,把手把教學

時間 2019-11-13

標籤一個完整微信上傳圖片下載實例手把教學简体版

原文原文鏈接

步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。javascript

備註：登陸後可在「開發者中心」查看對應的接口權限。php

步驟二：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.jscss

請注意，若是你的頁面啓用了https，務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，不然將沒法在iOS9.0以上系統中成功使用JSSDKhtml

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.jsjava

備註：支持使用 AMD/CMD 標準模塊加載方法加載jquery

步驟三：經過config接口注入權限驗證配置

步驟四：經過ready接口處理成功驗證

步驟五：經過error接口處理失敗驗證

接口調用說明

全部接口經過wx對象(也可以使用jWeixin對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用參數：web

success：接口調用成功時執行的回調函數。
fail：接口調用失敗時執行的回調函數。
complete：接口調用完成時執行的回調函數，不管成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

備註：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回。ajax

以上幾個函數都帶有一個參數，類型爲對象，其中除了每一個接口自己返回的數據以外，還有一個通用屬性errMsg，其值格式以下：json

調用成功時："xxx:ok" ，其中xxx爲調用的接口名
用戶取消時："xxx:cancel"，其中xxx爲調用的接口名
調用失敗時：其值爲具體錯誤信息

基礎接口

判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 須要檢測的JS接口列表，全部JS接口列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回，可用的api值true，不可用爲false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

備註：checkJsApi接口是客戶端6.0.2新引入的一個預留接口，第一期開放的接口都可不使用checkJsApi來檢測。api

上代碼：

<?php session_start();?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--分享使用-->
    <meta itemprop="name" content="" />
    <meta itemprop="description" name="description" content="" />
    <meta itemprop="i   mage" content="img_url" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="../css/global.css">
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../css/my_css.6.21.css" />
    <link rel="stylesheet" type="text/css" href="../css/NumberBank.css" />
    <link rel="stylesheet" type="text/css" href="../css/zxd.css" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_jqxfkr2jiikhjjor.css" />
</head>
<body>
    <header>
        <div id="head">
            <a href="index.html"><span class="iconfont icon-left back"><span class="b_child">返回</span></span></a>
            <p>我爲八街代言<a href=""><span class="iconfont icon-gengduo2 more"></span></a></p>
        </div>
    </header>
    <div id="content_choose">
        <div class="main">
            <h1>您選擇了&nbsp;您與玫瑰</h1>
            <div class="find">
                <div class="box_img"><img src="../img/img1.png"/></div>
            </div>
            <div class="find" id="upload_btn">
                <div class="box_img"><span class="inner"><img id="my_img" src="../img/photo.png" /></span></div>
                <input name="upload_img" type="text" id="upload_img_val" value="-1" />
            </div>
            <div class="btn" ><a id="next_btn" href="activity.html"><img src="../img/btn1.png"/></a></div>
        </div>
        
    </div>
</body>
<?php 
$url = $_SERVER["DOCUMENT_ROOT"]."/class/JSSDK.php";
include($url);
$jssdk = new JSSDK($_SESSION["appid"], $_SESSION["appacrect"]);
$return_data['AccessToken'] = $jssdk ->getAccessToken();
$return_data['SignPackage'] = $jssdk->GetSignPackage();
?>

<script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script>
<script type="text/javascript" src="../lib/swiper.min.js"></script>
<script type="text/javascript" src="../lib/uploadPreview.js"></script>
<script type="text/javascript" src="../script/zxd.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: false, // 開啓調試模式,調用的看全部api的返回值會在客戶端alert出來，若要pc端打開查傳入的參數，能夠在，參數信息會經過log打出，僅在pc端時纔會打印。
        appId:        '<?php echo $return_data["SignPackage"]["appId"];?>', // 必填，公衆號的惟一標識
        timestamp: '<?php echo $return_data["SignPackage"]["timestamp"];?>', // 必填，生成簽名的時間戳
        nonceStr : '<?php echo $return_data["SignPackage"]["nonceStr"];?>', // 必填，生成簽名的隨機串
        signature: '<?php echo $return_data["SignPackage"]["signature"];?>',// 必填，簽名，見附錄1
        jsApiList: ['chooseImage','uploadImage','downloadImage'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
    });
    wx.error(function(res){
        alert(res.errMsg);
    });
    $(function(){
        $("#next_btn").click(function(){
            var img_val = $("#upload_img_val").val();
            if(img_val==-1){
                alert("請上傳圖片!");return false;
            }else{
                //下載圖片微信圖片到本地服務器
                var data ={img_id:img_val,access_token:'<?php echo $return_data["AccessToken"];?>'};
                var url = '<?php echo $_SESSION["base_site_url"]."/weixin/downlodimg.php";?>';
                var suess_url = '<?php echo  $_SESSION["base_site_url"]."/temp/html/activity.html" ?>';
                $.ajax({
                    type: "POST",
                    async:true,
                    url:url ,
                    dataType: 'json',
                    data: data,
                    success: function(msg){
                        if(msg.stat==1){
                            window.location.href=suess_url;
                        }else {
                            alert("圖片保存失敗,請重試:" + msg.path);
                            return false;
                        }
                    }
                });
                return false;

            }


        });
        $('#upload_btn').click(function(){
            chooseImage();
        })
    });
    function chooseImage(){
        // 選擇張片
        wx.chooseImage({
            count: 1, // 默認9
            success: function(res) {
                var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
                $("#my_img").attr('src', localIds);
                // 上傳照片
                upload_img();
                function upload_img(){
                    wx.uploadImage({
                        localId: '' + localIds,
                        isShowProgressTips: 1,
                        success: function(res) {
                            serverId = res.serverId;
                            $("#upload_img_val").val(serverId); // 把上傳成功後獲取的值附上
                        }
                    });
                }
            }
        });
    }

</script>
</html>

ajax下載微信服務器上的圖片到本地保存

<?php
session_start();
downlodimg();
function downlodimg(){
    $serverId = trim($_POST['img_id']);
    $access_token = trim($_POST['access_token']);
    if(empty($serverId) || empty($access_token)){
        exit(json_encode(array('stat'=>0)));
    }
    $targetName = $_SESSION['open_id'].'.jpg';
    $save_path  = $_SERVER["DOCUMENT_ROOT"].'/data/upload_img/'.$targetName;
    $url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$serverId}";
    $raw = file_get_contents($url);
     file_put_contents($save_path,$raw);
    if(file_exists($save_path)){
        exit(json_encode(array('stat'=>1)));
    } else {
        die(json_encode(['stat' => 0, 'path' => $save_path]));
    }
}

下面給出一個獲取微信相關信息的接口類

<?php
class JSSDK {
    private $appId;
    private $appSecret;

    public function __construct($appId, $appSecret) {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
    }

    public function getSignPackage() {
        $jsapiTicket = $this->getJsApiTicket();

        // 注意 URL 必定要動態獲取，不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        if(ip2long($_SERVER['HTTP_HOST'])) {
            $_SERVER['HTTP_HOST'] = $_SERVER['SERVER_NAME'];
        }
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

        $timestamp = time();
        $nonceStr = $this->createNonceStr();

        // 這裏參數的順序要按照 key 值 ASCII 碼升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$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 應該全局存儲與更新，如下代碼以寫入到文件中作示例
        $file_name=$_SERVER["DOCUMENT_ROOT"].'/data/token/jsapi_ticket.json';
        $data = json_decode(file_get_contents($file_name));
        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;
                $fp = fopen($file_name, "w");
                fwrite($fp, json_encode($data));
                fclose($fp);
            }
        } else {
            $ticket = $data->jsapi_ticket;
        }

        return $ticket;
    }
    public function getAccessToken(){
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
        $token_file = $_SERVER["DOCUMENT_ROOT"].'/data/token/access_token.txt';
        if(!file_exists($token_file)||(filemtime($token_file)+7200)<time()){
            $token_str = $this->httpGet($url);
            $token_arr = json_decode($token_str);

            if(($token_arr->access_token)!=''){
                file_put_contents($token_file, $token_arr->access_token);
            }
        }
        $token = file_get_contents($token_file);//此行不要刪

        $getip_url="https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token=";
        //echo $getip_url.$token;
        $ip_json = $this->httpGet($getip_url.$token);
        $ip_json_arr = json_decode($ip_json,true);
        if($ip_json_arr["errcode"]=='40001'||$ip_json_arr["errcode"]=='41001'){
            //若是失效
            $token_str = $this->httpGet($url);
            $token_arr = json_decode($token_str);
            if(($token_arr->access_token)!=''){
                file_put_contents($token_file, $token_arr->access_token);
            }
        }
        $token=file_get_contents($token_file);
        return $token;
    }

    private function httpGet($url) {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        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;
    }
    /**
     * 是不是微信打開
     * */
    public function is_wx_pro(){
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        if (strpos($user_agent, 'MicroMessenger') === false) {
            // 非微信瀏覽器禁止瀏覽
            return false;
        } else {
            // 微信瀏覽器，容許訪問
            //preg_match('/.*?(MicroMessenger\/([0-9.]+))\s*/', $user_agent, $matches);//echo "MicroMessenger";
            //echo '<br>Version:'.$matches[2];// 獲取版本號
            return true;
        }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。