微信公众号H5开发——调用相册和摄像头并上传服务器

之前的文章介绍了关于微信JSSDK调用，下面介绍一下其中的一个最常用的功能——调用相册和摄像头

使用此功能之前先参考：微信JSSDK

在通过了config接口验签成功之后，我们就可以调用微信JSSDK的方法了

1、config配置成功

// 通过config接口注入权限验证配置，可查阅微信公众平台接口进行配置 wx.config({debug: false,appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList:['chooseImage','uploadImage','getLocalImgData','downloadImage'],// 必填，需要使用的JS接口列表 声明});wx.ready(function () {wx.checkJsApi({jsApiList: ['chooseImage','previewImage','uploadImage','downloadImage'],success: function (res) {if (res.checkResult.getLocation == true) {wxChooseImage();}}});});wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。alert("验证失败，请重试！");});

2、调用相册和摄像头

wx.chooseImage({count: 1, // 最多可以选择的图片张数，默认9sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有success: function (res) {let localIds = res.localIds; // 返回选定照片的本地ID列表（手机上操作就是手机端的ID列表，是一个数组），localId可以作为img标签的src属性显示图片wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (result) {let serverId = result.serverId; // 返回图片的服务器端ID// 可以将serverId传给后台，用于存放在自己服务器上}});},fail: function() {},complete: function() {}
});

3.上传到微信服务器

function wxChooseImage() {wx.chooseImage({success: function(res) {var localId = res.localIds; function upload() {//图片上传wx.uploadImage({localId: localId[i],success: function(res) {var serverId = res.serverIdl;//图片上传完成之后，进行图片的下载，图片上传完成之后会返回一个在腾讯服务器的存放的图片的ID--->serverIdwx.downloadImage({serverId: res.serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId = res.localId; // 返回图片下载后的本地ID//通过下载的本地的ID获取的图片的base64数据，通过对数据的转换进行图片的保存wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示//通过ajax来将base64数据转换成图片保存在本地$.ajax({});}});}});},fail: function(res) {}});}}});}

完成以上步骤就可以在微信H5中调用相册和摄像头并上传服务器了

微信公众号H5开发——调用相册和摄像头并上传服务器相关推荐

微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
微信公众号开发,一站式踩坑开发前提:例如你们域名是https://www.baidu.com 配置nginx反向代理,把你项目的端口重定向到你们测试环境或线上环境域名 # 访问https://bai ...
微信公众号H5开发，实现网页授权（静默登录）
文章目录业务场景具体实现 1. 配置微信后台 2. 上传校验文件 3. 网页静默授权附:官方文档业务场景最近我司有个2C的需求,以分享链接的形式推广某线上活动, 要求一个链接覆盖微信.H5和 ...
微信公众号H5开发登录授权流程
很久没写博客了,最近实在是太忙,有太多东西想写想记录.今天写个关于微信登录的过程吧,这次项目是我第一次写关于微信的东西,这个登录授权搞了半天.但总算是把流程搞明白了,先附上微信官方文档微信公众平台 ...
uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2
文章目录前言一.废话不多说直接上代码总结前言根据上次发布的文章进一步改善了全屏横屏播放,去除了导航栏,实现伪全屏,但是ios系统不行,只能用自带的全屏按钮,让用户点击. 来点我遇到的问题吧 ...
springboot+uniapp(vue) 微信公众号h5开发
代码基于jeecgboot 的uniapp项目修改业务类相关代码 //region 授权登录/*** 获取code的地址* @return*/@Overridepublic String getCo ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...

微信公众号H5开发——调用相册和摄像头并上传服务器

微信公众号H5开发——调用相册和摄像头并上传服务器相关推荐

最新文章

热门文章