云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

微信内打开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://wziyi.net/?post=286

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    隔壁老王 Lv.1 回复

    隔壁老王

    IP数据库文件不存在或者禁止访问或者已经被删除!