一个完整的微信上传图片下载图片实例,把手把教学

Posted 闻道先后,术业专攻

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个完整的微信上传图片下载图片实例,把手把教学相关的知识,希望对你有一定的参考价值。

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在ios9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能,请引入 jweixin-1.1.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:通过config接口注入权限验证配置

步骤四:通过ready接口处理成功验证

步骤五:通过error接口处理失败验证

接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

  1. success:接口调用成功时执行的回调函数。
  2. fail:接口调用失败时执行的回调函数。
  3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
  4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
  5. trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。

备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回


以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:

  1. 调用成功时:"xxx:ok" ,其中xxx为调用的接口名
  2. 用户取消时:"xxx:cancel",其中xxx为调用的接口名
  3. 调用失败时:其值为具体错误信息

基础接口

判断当前客户端版本是否支持指定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来检测。

 

上代码:

<?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;
        }
    }
}

 

以上是关于一个完整的微信上传图片下载图片实例,把手把教学的主要内容,如果未能解决你的问题,请参考以下文章

1V1手把手实战教学,微搭低代码中如何上传图片

asp微信jssdk上传图片,asp上传自动压缩图片,是通过微信上传的

收藏夹吃灰系列:使用MultipartFile实现图片指定路径上传下载并使用postman测试教程 | 附完整源码,强烈建议收藏!

微信上传电脑图片拽出来怎么成clipboard?

小程序中制作类似微信端上传9图功能

微信上传图片