微擎二次开发-微信调用拍照和选择图片功能

任务需求背景：购买商品，下单完成之后要实名验证，再安排发货

1.遇到的问题,每当遇到需要在微信工具才能打开的网页,思考

MobilePage

class History_EweiShopV2Page extends MobileLoginPage 这个是要经过微信授权的
2.利用微信图片上传功能
微信调用拍照和选择图片功能 
微信JS-SDK说明文档
在域名验证,授权成功的基础上
遇到的问题.当你在微信工具调用时出现chooseImage:fail, the permission value is offline verifying

说明jsApiList js接口列表没有chooseImage

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: ['chooseImage','xx'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});
实例:单张图片上传并成功显示(条件已经授权成功并调用)
拍照上传查看

1 <div class='fui-cell'>
2    <div class='fui-cell-label'>身份证正面:div>
3    <div class="row" >
4       <input id="identify_img_input"  name="identify_img_input" type="hidden">
5       <div class="col-md-6"> <button type="button" class="btn  block camera" onclick="upload('identify_img')">上传照片button>div>
6       <div class="col-md-6"><img onclick="previewImage('identify_img')" id="identify_img" src="" alt="" width="60px" height="60px"/>div>
7 
8    div>
9 

div>

 

 1 function upload(data) {
 2 
 3        $var_img = data;//selertor
 4            $var_input = $('#'+data+'_input'); //图片值 identify_img2_input
 5 
 6             wx.chooseImage({
 7                 count: 1, // 默认9
 8                 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
 9                 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
10                 success: function (res) {
11                     //images.localId = res.localIds;
12                     localIds = res.localIds;  // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
13                     document.getElementById($var_img).src = localIds;   //选择的图片 显示
14                     //必须做一下mediaId的设定，否则将会无法在安卓端得到微信上传功能的触发
15                     localId = localIds.toString();
 //在成功选择图片或拍照的时候 可以触发上传图片,
16                     wx.uploadImage({
17                         localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
18                         isShowProgressTips: 1, // 默认为1，显示进度提示
19                          
20                         success: function (res) {
21                             var serverId = res.serverId; // 返回图片的服务器端ID 4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095

22                             //当成功从微信服务端返回 serverid 上传到php自己服务器上 
23                             $.ajax({
24                                 url:"{php echo mobileUrl('member/info/getmedia')}",
25                                 type:'post',
26                                 data:{
27                                     media_id:serverId,
28                                 },
29                                 dataType:'json',
30                                 success:function(data){
31                                     if (data.error == 1) {
32                                         alert(data.message);
33                                     } else {
34 
35                                         $($var_input).val(data.realimgurl); //图片显示在前端 
36                                     }
37                                 },
38                                 error: function(request) {
39                                     alert("Connection error");//make-in-lemon 正式发行可选择屏蔽
40                                 },
41                             });
42 
43                         },
44                         fail:function(res){
45                             alert(res.errMsg);
46                             // alert(JSON.stringify(res))
47                         }
48                     });
49 
50                 }
51             });
52         }

php服务端 上传图片代码

public function getmedia()
    {
        global $_W, $_GPC;
        //$access_token = WeAccount::token();
        $media_id = $_GPC['media_id'];//4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095

        $media_id = '4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095';
        $access_token = "8HB-zIqVZK_VB08WJFFXGNohsVknCalzlkTXeLGQSCb9x654gI1_oO95Jzd7KYbS2urNtIv6e-y6IYObjKINbwzkdbZNUSrbciYsHljqXYSiU_P6D_0WHPJm5JHu4XeMONJeABASRN";
        $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" . $access_token . "&media_id=" . $media_id;
        $updir = "../attachment/images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/";
        if (!file_exists($updir)) {
            mkdir($updir, 511, true);//创建一个目录
        }
        $randimgurl = "images/" . $_W['uniacid'] . "/" . date("Y", time()) . "/" . date("m", time()) . "/" . date('YmdHis') . rand(1000, 9999) . '.jpg';
        $targetName = "../attachment/" . $randimgurl;
        $ch = curl_init($url);
        $fp = fopen($targetName, 'wb');
        curl_setopt($ch, CURLOPT_FILE, $fp);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_exec($ch);
        curl_close($ch);
        fclose($fp);
        if (file_exists($targetName)) {
            $resarr['error'] = 0;
            $this->mkThumbnail($targetName, 640, 0, $targetName);
            if (!empty($_W['setting']['remote']['type'])) {
                load()->func('file');
                $remotestatus = file_remote_upload($randimgurl, true);
                if (is_error($remotestatus)) {
                    $resarr['error'] = 1;
                    $resarr['message'] = '远程附件上传失败，请检查配置并重新上传';
                    file_delete($randimgurl);
                    die(json_encode($resarr));
                } else {
                    file_delete($randimgurl);
                    $resarr['realimgurl'] = $randimgurl;
                    $resarr['imgurl'] = tomedia($randimgurl);
                    $resarr['message'] = '上传成功';
                    die(json_encode($resarr));
                }
            }
            $resarr['realimgurl'] = $randimgurl;
            $resarr['imgurl'] = tomedia($randimgurl);
            $resarr['message'] = '上传成功';
        } else {
            $resarr['error'] = 1;
            $resarr['message'] = '上传失败';
        }
        echo json_encode($resarr, true);
        die;
    }

View Code

 

转载于:https://www.cnblogs.com/gscq073240/articles/7801996.html