微信JS-SDK上传图片

接入步骤:

第一步,在微信公众号或者企业号配置JS接口安全域名

公众号设置--功能设置--JS接口安全域名

注:在开发菜单可以看到接口权限,如果是微信公众号的话,订阅号和服务号在接口权限上有区别,服务号权限更高一些

找到JS接口安全域名的配置,如下图

这里有几点要说明:

1、必须是域名的格式,不支持IP地址和端口号,所以域名映射必须是80端口,二级域名是可以的。

这里不需要http或者https,因为这里是域名不是地址

第二步:引入JS

type="text/javascript">

注:可以写成http://或者https://,我写成//其实是包含了http和https两种

第三步:通过config接口注入权限验证配置

$.getJSON('toupload',,function(json_result){

if(json_result.status != 0){

//console.log(json_result.description);

//alert(json_result.description);

return;

}

//生产环境中,请dubug: false

wx.config({

beta:true,//必须这么写,否则wx.invoke调用形式的jsapi会有问题

debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: json_result.data.appId,//必填,企业微信的corpID

timestamp:json_result.data.timestamp,//必填,生成签名的时间戳

nonceStr:json_result.data.nonceStr,//必填,生成签名的随机串

signature:json_result.data.signature,//必填,签名

jsApiList: ['chooseImage','previewImage','uploadImage','getLocalImgData']//必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

});

toupload方法需要做以下几件事:

1、根据isqy获取公众号或者企业号的appId和corpId

2、获取accessToken

3、计算签名

代码如下:

签名的计算:

//企业号地址

//公众号地址

Stringgzh_url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+Constants.AppId+"&secret="+Constants.AppSecret;

注:accessToken的有效时间是7200s,所以当accessToken过期了是需要重新获取一遍的

第五步:拍照或者从手机相册选取照片

wx.chooseImage({

count: 1,//默认9

sizeType: ['original','compressed'],//可以指定是原图还是压缩图,默认二者都有

sourceType: ['album','camera'],//可以指定来源是相册还是相机,默认二者都有

success:function(res) {

varimgcount = $("#imgcount").val();

varlocalIds = res.localIds;//返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

wx.uploadImage({

localId: localIds[0],//需要上传的图片的本地ID,由chooseImage接口获得

isShowProgressTips: 1,//默认为1,显示进度提示

success:function(res) {

varnewcount = Number(imgcount)+Number(1);

$("#imgcount").val(Number(newcount));

varserverId = res.serverId;//返回图片的服务器端ID

callback(serverId);

}

});

wx.getLocalImgData({

localId: localIds[0],//图片的localID

success:function(res) {

//varlocalData = res.localData; //localData是图片的base64数据,可以用img标签显示

//show_local_image(localData,fileId);

}

});

},

cancel:function(res){//用户取消

varimgcount = $("#imgcount").val();

cancel(imgcount);

}

});

一般微信是可以选择9张图片,如果选择了多张图片,最后上传也是一张一张的上传,其实没什么区别,图片越多花的时间越长

效果就是这样

微信API接口说明:

我不具体解释了,一般的看名字能认识吧...

贴个地址,自己看吧

第六步:上传图片到自己的服务器

$.getJSON('toupload', ,function(json_result){

if(json_result.status !== 0){

//console.log(json_result.description);

//alert(json_result.description);

return;

}

show_local_image(json_result.data[1],fileId);

show_server_origin_image(json_result.data[0]);

show_server_thumb_image(json_result.data[1]);

//alert(json_result.data[1]);

//alert(fileId);

});

media_id:每张图片都对应一个media_id

选择图片上传之后,实际上一个图片对应了三个,包括本地一个,压缩后的图片一个,原图一个

看一下后台代码:

这里做的操作实际上很简单,首先向微信服务器发送请求,从微信服务器上下载下来这个图片,然后进行压缩,然后我返回了两个标识,分别是压缩后的和原图,然后分别把这两个图片上传到我们自己的服务器,createImageAttach即为上传的方法,这里是需要自己写的

到这一步,图片上传下载,都已经完成了,然后就是简单的展示了,如果上传服务器成功了,可以只展示本地的图片,就是第五步里的localData,是个base64的数据,写在img标签的src里可以直接显示。

效果图:

以上来自一位暴走的女程序员

我这么可愛你忍心不点赞吗

小可爱长按下面的二维码可以订阅我的公众号哦

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180627G0G6WR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券