微信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里可以直接显示。

效果图：

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

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

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