微擎手机端调用拍照和选择图片功能

admin · 发表于 2024-5-25 20:17:08

我们在使用微擎开发应用模块的时候，需要开发用户手机端上传图片或者视频的场景。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
});

复制代码

实例：单张图片上传并成功显示(条件已经授权成功并调用)
拍照上传查看HTML代码：

<div class="fui-cell">
<div class="fui-cell-label">身份证正面：</div>
<div class="row">
<input id="identiry_img_input" name="identiry_img_input" type="hidden">
<div class="col-md-6">
<button type="button" class="btn block camera">上传照片</button>
</div>
<div class="col-md-6">
<img id="identify_img" src="" alt="" width="60px" height="60px" />
</div>
</div>
</div>

复制代码

模板效果如下图：

javascript代码：

<script>
function upload(data){
$var_img = data; //selertor
$var_input = $('#'+data+'_input'); //图片值 identify_img2_input
wx.chooseImage({
count:1, //默认9
sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success:function(res){
//images.localId = res.localIds;
localIds = res.localIds; //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
document.getElementById('$var_img').src = localIds; //选择的图片显示
//必须做一下mediaId的设定，否则将会无法在安卓端得到微信上传功能的触发
localId = localIds.tostring(); //在成功选择图片或者拍照的时候可以触发上传图片
wx.uploadImage({
localId:localId, //需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1, //默认为1，显示进度提示
success:function(res){
var serverId = res.serverId; //返回图片的服务器端ID 4HY4_D5p8ZcBIeVPKUIkvWBd7OlNr_f2TVPAs32xnb5oZQDugO1qPYoz-7Jpc095
//当成功从微信服务端返回 serverid 上传到php自己服务器上
$.ajax({
url:"{php echo $this->createMobileUrl('member/info/getmedia')}",
type:'POST',
data:{media_id:serverId},
dataType:'json',
success:function(data){
if(data.error == 1){
alert(data.message);
}else{
$($var_input).val(data.realimgurl); //图片显示在前端<img>
}
},
error:function(request){
alert("Connection error"); //make-in-lemon 正式使用可选择屏蔽
}
});
},
fail:function(res){
alert(res.errMsg);
//alert(JSON.stringify(res))
}
});
}
});
}
</script>

复制代码

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

复制代码

大功告成！

微擎手机端调用拍照和选择图片功能

本帖子中包含更多资源

浏览过的版块