微信JSSDK图片上传问题和解决

时间 2021-02-14

标签 php 前端 ajax json api 安全服务器微信微信开发 app 栏目 PHP 繁體版

原文原文链接

目录 Listphp

那一抹淡淡的忧伤—–微信开发基础
用纯js是不可能用纯js了，这辈子都不用纯js了 —– 微信JSSDK开发以及问题解答
要你命3000 —— 微信支付开发系列问题解决

导语
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
经过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时能够直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
本文重点讲最新的JSSDK版本1.2，关于1.2版本的说明能够参考这里
尤为注意从1.2版本开始微信针对IOS系统WKWebview内核作出了重大改变，因此广大开发者当以最新JSSDK1.2版本为开发源码，不然可能形成IOS部分功能无效前端

开发前准备
步骤一：绑定域名ajax

先登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登陆后可在“开发者中心”查看对应的接口权限。json

步骤二：引入JS文件
在须要调用JS接口的页面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...api

步骤三：经过config接口注入权限验证配置安全

wx.config({
debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
appId: ”, // 必填，公众号的惟一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ”, // 必填，生成签名的随机串
signature: ”,// 必填，签名，见附录1
jsApiList: [] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2 });服务器

直接用代码演示微信

//加载微信JSSDK config
wx.config({微信开发

debug: false,
    appId: 'APPID',
    timestamp: time,
    nonceStr: 'NONCESTR',
    signature: 'SIGNATURE',
    jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'onVoicePlayEnd',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard',
    ]
});
//JSSDK错误报告
wx.error(function(res){
    console.log(location.href.split('#')[0]);
});

config里面所涉及到的参数咱们经过JSSDK官方demo来提供数据，我对官方的demo进行了再次封装，直接在这里贴出来：app

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://";
    $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 应该全局存储与更新，如下代码以写入到文件中作示例
    $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;
}

private 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, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
    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($filename), 15));
}
private function set_php_file($filename, $content) {
    $fp = fopen($filename, "w");
    fwrite($fp, "<?php exit();?>" . $content);
    fclose($fp);
}

}

务必先拿到数据后注册给JSconfig，不然微信JSSDK是无效的

等你一切准备得当的时候请打开网页调试里的console来查看效果

正确调用的状况：

到这里全部的准备工做就完成了

图片选择
调用JSSDK的图片接口

wx.chooseImage({

count: 1,
        success: function (res) {
            //选择图片成功后
            images.localId = res.localIds;//安卓能够直接使用localIds 预览图片
            if(res.localIds.indexOf("wxlocalresource") != -1){
                res.localIds = res.localIds.replace("wxlocalresource", "wxLocalResource");
            }
          )};  
           //如下的适配IOS
           //先使用阅览接口（适配IOSWKWebview版本）
                wx.getLocalImgData({
                    localId: images.localId[i], // 图片的localID
                    success: function (res) {
                        var localData = res.localData; // localData是图片的base64数据，能够用img标签显示
                        $("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");
                    }

                });

图片上传
直接采用递归方法来上传多张图片

function upload() {

wx.uploadImage({
                    localId: images.localId[i].toString(),
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        i++;
                        var media_id = res.serverId;

                        images.serverId.push(res.serverId);//上传到了服务器的ID

                        if (i < length) {
                            upload();
                        }
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });

}

将上传到服务器的图片下载到本地项目
public function getmedia(){

$media_id = get.sevrid;//前端返回的上传后的媒体id
    $weixin = new Weixinpay(); //实例化微信类
    $access_token = $weixin->getToken(); //获取token

    $url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
    //获取微信“获取临时素材”接口返回来的内容（即刚上传的图片）
    $a = file_get_contents($url);
    //echo $a;
    $filename = date('YmdHis').rand(1000,9999).'.jpg';
    //以读写方式打开一个文件，若没有，则自动建立
    $resource = fopen($_SERVER["DOCUMENT_ROOT"].'/Uploads/User_img/'.$filename, 'w+');
    //将图片内容写入上述新建的文件
    fwrite($resource, $a);
    //关闭资源
    fclose($resource);
    echo '/Car/Common/Uploads/User_img/'.$filename;
}

经过以上方法咱们能达到用户用微信自带的上传图片系统上传到咱们本身服务器上

完整代码
var images = {

localId: [],
    serverId: []
};
choose.onclick = function(){
    wx.chooseImage({
        count: 1,
        success: function (res) {
            //选择图片成功后
            images.localId = res.localIds;
            if(res.localIds.indexOf("wxlocalresource") != -1){
                res.localIds = res.localIds.replace("wxlocalresource", "wxLocalResource");
            }
            var i = 0, length = images.localId.length;

            function upload() {
                //先使用阅览接口（适配IOSWKWebview版本）
                wx.getLocalImgData({
                    localId: images.localId[i], // 图片的localID
                    success: function (res) {
                        var localData = res.localData; // localData是图片的base64数据，能够用img标签显示
                        $("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");
                    }

                });
                wx.uploadImage({
                    localId: images.localId[i].toString(),
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        i++;
                        var media_id = res.serverId;

                        images.serverId.push(res.serverId);
                        $.ajax({
                            url:'getmedia.php',
                            data:{'mid':res.serverId.toString()},
                            type:'get',
                            success:function(res){
                                $("input[name='qu_img']").val(res);
                                $("#chooseImage").hide();
                            }

                        });
                        if (i < length) {
                            upload();
                        }
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });

            }
            upload();
        }
    });

}