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