我在前面一篇博客写到了怎么配置调用微信JS-SDK,这篇博客我来分享怎么使用微信图像接口,上传图片,
下面我们分三部说明调用微信图像接口选择图片、将图片上传至微信服务器.
一.调用微信图像接口选择照片,并实时显示.
//为按钮加上点击事件 $('#choose').click(function () { //调用微信选图接口,拍照或从相册选取照片 wx.chooseImage({ count: 9, //选择可以一次选择上传几张照片,默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表, // localId可以作为img标签的src属性显示图片,为一个数组。 //在本地显示图片,目的,可以将选错的图片删除重选。 var string = ''; for(var i in localIds){ string = string + '<img src="'+localIds[i]+'" /><input name="imgs" hidden="hidden" value="'+ localIds[i]+'"/>' ; } $('#di').append(string); } }); });
二.将图片上传至微信服务器.
//确定图片无误后我们将图片上传到微信服务器 $('#uploading').click(function () { upLoad(); }); //定义一变量是每张本地图片id的索引 var i = 0; //定义一个数组,保存图片在微信服务端的id var dataImg = []; //上传图片到微信浏览器的函数,wx.uploadImage接口一次只能上传一张图片,参数imGs是所有要上传图片的本地id组成的一个数组。 //我们上传图片,上传完成后,我们将返回图片在微信服务端的id保存在数组中 function upLoad() { //获取上传图片的本地id var imgs = $('input[name=imgs]'); if(imgs.length > i){ wx.uploadImage({ localId: $(imgs[i]).val(), // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID //我们将图片在微信服务器在id保存在数组中 dataImg[i] = serverId; i++; upLoad(); } }); } }