微信js sdk图片接口 上传图片

　　开发微信平台网页不可避免的需要调用微信提供的接口。微信JS-SDK提供了方便的调用。

　　需要实现上传图片更换头像的功能，要用到图片相关的几个接口。根据微信开发者文档的说明，步骤一绑定域名，步骤二引入js文件都比较简单。

　　步骤三：通过config接口注入权限验证配置。项目所使用的是通过ajax获取数据，所以我是在success中注入config。

success: function (signature, status, xhr) {   　
wx.config({
debug: true,
appId: signature.appid,
timestamp: signature.timestamp,
nonceStr: signature.noncestr,
signature: signature.signature,
jsApiList: ['chooseImage',uploadImage','downloadImage']
});
}

　　需要注意的是nonceStr，appId的大小写问题，可以看到这里后端拿到的是小写的。

　　测试的时候总是提示invalid signature，文档上列出了常见错误可以对照着排查。其实出现这个问题的主要原因还是url不对。

$$.ajax({
url: "http://",
method: 'POST',
data: JSON.stringify({url: location.href}),`
}

　　1. 确定url是否正确。

　　2. 确定data中url是当前页面的地址。如果分享还要注意使用encodeURIComponent(location.href.split(‘#’)[0]) 。因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

　　如果config注入成功控制台会打印“ok”,接着在wx.ready()中处理。

　　我想要实现的功能是点击头像选择图片可以自动更换。其实这个过程涉及到几个接口[‘chooseImage’, ‘uploadImage’,’downloadImage’] 。 chooseImage已经可以在选择图片时预览了，通过localId可以直接在设备上显示，但并没有存到自己的服务器上。可以先传到微信服务器上再下载到本地服务器。

wx.ready(function() {
var images = {
localId: [],
serverId: [],
downloadId: []
};
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
if (images.localId.length == 0) {
alert('请先选择图片');
return;
}else {
wx.uploadImage({
localId: images.localId.toString(),
success: function (res) {
alert("上传成功！"+res.serverId);
images.serverId.push(res.serverId);
///存储到本地服务器
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
}
});
});`

　　这里是只能选择一张图片的情况。同时要注意函数的执行顺序，直到有返回结果才可以进行下一步。也可以用回调函数的形式写。