微信jssdk上传图片
时间 :2019-6-21 评论: [ 0 ] 条 浏览: [ 267 ] 次
本代码在Tp3.2.3上运行成功,若是其他框架 文中的PHP代码可能不会适用,HTML和Javascript代码不受影响,仅作参考!
Html代码:
Javascript代码:
var wx_ok=false;
var conf = JSON.parse('{$wx_js_sign|json_encode=###,true}');
conf.debug = false;
//初始化JS-SDK
JsSdk_Config(conf);
//检测 JS-SDK 能否正常使用
wx.ready(function () {wx_ok=true;})
function JsSdk_Config(conf) {
wx.config({
debug: conf.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: conf.appId, // 必填,公众号的唯一标识
timestamp: conf.timestamp, // 必填,生成签名的时间戳
nonceStr: conf.nonceStr, // 必填,生成签名的随机串
signature: conf.signature,// 必填,签名
jsApiList: ['startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ']
});
}
var wechat_img_id = new Array();
function add_imgs(count = 9,sizeType=['original', 'compressed'],sourceType=['album', 'camera']) {
if(!wx_ok)
{
showMsg('微信还没准备好');
return;
}
wx.chooseImage({
count: count, // 默认9
sizeType: sizeType, // 可以指定是原图还是压缩图,默认二者都有
sourceType: sourceType, // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
Wechat_Upload(localIds);
}
});
}
//微信端上传图片
function Wechat_Upload(localIds) {
if (!localIds.length) {
return;
} else {
if(wechat_img_id.length < 11)
{
var localId = localIds.pop();remove_img("sss")
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function(res_data) {
var serverId = res_data.serverId;
wechat_img_id.push(serverId);
var that_box = $('#WxImgBox');
var html='
that_box.append(html);
Wechat_Upload(localIds);
}
});
}else{
showMsg('最多上传11张图片');
}
}
}
//移除上传的图片
function remove_img(sid) {
$('.remove_class').on('click',function () {
$(this).remove();
})
removeByValue(wechat_img_id,sid);
}
//删除数组中的值
function removeByValue(arr, val) {
for(var i=0; i
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
后端使用PHP:
protected function Wechat_img($img)
{
$options=array('token'=>$this->_config['weixin_token'],'encodingaeskey'=>$this->_config['weixin_encodingaeskey'],'appid'=>$this->_config['weixin_appid'],'appsecret'=>$this->_config['weixin_secret']);
$wechatObj=new \Org\Net\TPWechat($options);
$w_img=array();
try {
foreach($img AS $k => $v) {
$media_file=$wechatObj->getXhjMedia($v,false);
if($media_file!==false){
$img_thumb=imgThumb($media_file,300,500);
$w_img[]=array("type"=>"image","img"=>$media_file,"thumb"=>$img_thumb);
}
}
$data['status'] = 1;
$data['data'] = $w_img;
} catch (Exception $err) {
$data['status'] = 0;
$data['info'] = '文件错误:'.$err->getMessage();
}
return $data;
}
期间遇到了一个坑,就是使用'chooseImage'方法后得到localIds再用for循环执行'uploadImage'的方法导致每次都是第一张图片在上传,因为异步的问题所以js代码改成了 最后这个样子 解决了这个异步问题
赞4
踩0
发表评论:
昵称
邮件地址 (选填)
个人主页 (选填)