微信内打开h5利用微信的js-sdk上传图片且预览
1.第一步先调用 拍照或从手机相册中选图接口 获取到localIds 本地图片id的列表
2.调用 上传图片接口 传入本地图片的localid,如果上传成功则返回serverId,此处的serverId就是media_id,图片临时资源腾讯给保存3天。
3.由于只是短期有效,我们需要及时把图片下载到服务器目录,在上传图片接口 成功的回调里面利用js发送ajax请求到后端php,携带serverId参数,后端php调用 获取临时素材 接口负责把资源下载到网站目录,然后给前端返回图片的http路径,用于上传前预览。
主要实现代码前端:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> wx.config({ debug: false, appId: "{$signPackage.appId}", timestamp: "{$signPackage.timestamp}", nonceStr: "{$signPackage.nonceStr}", signature: "{$signPackage.signature}", jsApiList: [ // 所有要调用的 API 都要加到这个列表中 "chooseImage", "previewImage", "uploadImage", "downloadImage", "getLocalImgData" ] }); //点击按钮图片上传 $("[link=wx_upload_img]").click(function () { wx.ready(function () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 console.log(localIds); //$("[link=wx_upload_img]").attr("src", localIds[0]); wx.uploadImage({ localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID console.log('res', res); console.log('serverId', serverId); //发送ajax请求,交给php,下载微信存在保存在服务器目录,然后传给后端,并且有了服务器路径之后,更新下预览wl@20210805 $.post("{:url('Ajax/down_img_from_wx2local')}", { serverId: serverId, }, function (data) { if (data.slay != '0') { mui.alert(data.rs); return false; } //给预览图片赋值,以及给隐藏input狂赋值 $("[link=wx_upload_img]").attr("src", data.src); $("[name=SendManPic]").val(data.src); }, 'json') } }); } }); }); }); </script>php代码部分:
//down微信服务器临时素材,然后返回http路径用于前台显示 public function down_img_from_wx2local() { $request = Request::instance(); $param = $request->param(); //参数 $serverId = $param['serverId']; //当前页码数 $access_token=getAccessToken(); $json=httpGet("https://api.weixin.qq.com/cgi-bin/media/get?access_token=". $access_token."&media_id=".$serverId); //如果失败的话,这里是json,报错 if (is_json($json)) { logRes($json, "down_img_from_wx2local"); $arr=json_decode($json, 1); $rt['slay']=-1; $rt['rs']=$arr['errcode'].",detail:".$arr['errmsg']; echo outjson($rt); die; } $destination_folder = 'static/upload/zhufu/images/' . date('Ym') . '/'; $ftype ="jpg"; //不重复名字的文件 $imgname = create_guid() . '.' . $ftype; $destination = $destination_folder . $imgname; if (!is_dir($destination_folder)) { mkdir($destination_folder, 0777, true); } //生成文件,返回路径 file_put_contents($destination, $json); $rt['slay']=0; $rt['rs']="ok"; $rt['src']="/".$destination; echo outjson($rt); }
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:微信内打开h5利用微信的js-sdk上传图片且预览 - https://wlphp.com/?post=286
评论
1条评论隔壁老王 Lv.1 回复
隔壁老王
IP数据库文件不存在或者禁止访问或者已经被删除!