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

Posted 2020-09-09 闻道先后，术业专攻

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对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

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

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

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

调用成功时："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来检测。

上代码：

<?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图功能

微信上传图片