微信H5公众号chooseImg上传图片
微信H5公众号chooseImg上传图片
在微信H5公众号中,使用`chooseImg`功能可以让用户选择并上传图片到公众号。这种功能非常有用,特别是在一些需要展示图像信息的场景下,如分享照片、上传证件等。
步骤一:获取access_token
首先,我们需要获取微信服务器分配给我们的公众号的`access_token`。这个token是用于认证和鉴权的,可以通过以下API来获取:
```bash SDK文件,并且配置好相关参数。
```javascript// 加载微信JS SDK文件var wx = require('weixin-js-sdk');
// 配置相关参数wx.config({
debug: true, // 开启调试模式,调用的JS接口会在当前页面输出为LOG分线的内容 appId: 'APPID', // 必填,公众号的唯一标识 timestamp: '', // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名所需的随机数 signature: '', // 必填, 签名,见下文注解 jsApiList: ['chooseImage'] // 必填,需要使用的JS接口列表});
```
步骤三:选择图片
在初始化微信JSSDK之后,我们就可以通过`chooseImg`功能来让用户选择并上传图片了。
```javascript//选择图片wx.chooseImage({
count:1, // 最多选择一张图片 sizeType: ['original', 'compressed'], // 原图或压缩图 sourceType: ['album', 'camera'] // 相册或相机}, function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表});
```
步骤四:上传图片
在用户选择了图片之后,我们就可以通过`uploadImage`功能来上传这些图片到微信服务器了。
```javascript//上传图片wx.uploadImage({
localId: localIds[0], // 需要上传的图片 isShowProgressTips:1, // 默认0 success: function (res) {
var serverId = res.serverId; // 返回serverId(服务端ID)
}
});
```
步骤五:处理返回结果
最后,我们需要根据微信服务器返回的结果来进行相应的处理。
```javascript// 处理返回结果wx.error(function (res) {
console.log(res);
});
wx.ready(function () {
// config信息验证后会执行下述回调函数 wx.hideOptionMenu();
});
```
总结
通过以上步骤,我们就可以在微信H5公众号中使用`chooseImg`功能来让用户选择并上传图片到公众号了。这种功能非常有用,特别是在一些需要展示图像信息的场景下,如分享照片、上传证件等。
注意
以上内容仅供参考,请根据实际情况进行调整和完善。