公众号 h5 页面图片上传 wx.chooseImage使用

刚开始直接在H5里使用了wx.chooseImage,发现在开发者工具中不断的报错the permission value is offline verifying,慢慢开始搜索才发现在小程序的web-view里也必须使用jweixin,其实就是个公众号网页，

1.引入JS文件

// 推荐使用1.3.2以上的版本，之前的版本很多坑?
https://res.wx.qq.com/open/js/jweixin-1.3.2.js
// 我是直接用的npm包，目前基于1.4.0-test的版本
npm install weixin-js-sdk

2.通过config接口注入权限验证配置

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，微信公众号的唯一标识，此处填写公众号的appIdtimestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

3.通过ready接口处理成功验证

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

4.通过error接口处理失败验证

wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

5.判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({jsApiList: ['chooseImage'] // 需要检测的JS接口列表success: function(res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}},fail: function(err) {// checkJsApi接口调用失败}
});

6.接口调用

wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片}
});

invalid url domain：当前页面所在域名与使用appid没有绑定（可在该公众号后台的应用可信域名中配置当前H5页面的域名）；
invalid signature签名错误：建议按如下顺序检查，主要可能是域名一般带的参数，所以域名每次都不一样，必须在调用前通过域名来获取signature；
服务上线之后无法获取jsapi_ticket,一般是access_token调用次数过多被限制了，需要在服务端做缓存；
permission denied：该公众号号没有权限使用这个JSAPI（部分接口需要认证之后才能使用）；

处理图片数据为base64

wx.chooseImage获取到的图片为一个临时路径，微信同时提供了wx.getLocalImgData方法可以把获取到的路径转为base64格式的数据，至此就可以轻松许多了，但是转出来的base64在android和iOS中稍有不同，需要特别注意一下

wx.getLocalImgData({localId: req.localIds[0].toString(),success: function (res) {const localData = res.localData;let imageBase64 = '';if (localData.indexOf('data:image') == 0) {//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接imageBase64 = localData;} else {//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换//此时一个正常的base64图片路径就完美生成赋值到img的src中了imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');}}
});

上传图片
获取到图片的base64数据之后其实我们就可以为所欲为了，不需要使用wx.uploadImage和wx.downloadImage了，不仅需要麻烦的上传到微信服务器，还有三天的时间限制反而增加了成本，最好的方式就是直接上传至我们自己的服务器。

一般与服务端交互的这种文件类型一般采用表单提交–multipart/form-data的方式，这就要求我们熟悉传输form-data的数据交互，所以需要把刚才获取到的base64转为可post的二进制数据，JavaScript提供了原生的atob/btoa用来对base64进行编码和解码；

base64ToBlob(dataurl) {let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });
}

ok,处理好可交互的数据就可以上传到自己的服务器了，之后相当于普通H5页面的图片交互了,可上传可下载?

let param = new FormData();
param.append('headPic', imageData);
this.$http.post('/upload.json', {headers: {'Content-Type': 'multipart/form-data',},params: param,
}).then(res => {console.log('上传成功', res);
});

wx.chooseImage成功调用后iOS和android分别调起系统原生的拍照和相册，分别如下图：

完整代码

终于。。。可以告一段落了，至此小程序的web-view里成功使用了wx.chooseImage,下面把完整代码贴出来，敬请参考?

<template><div class="card-avatar"><img:src="avatarUrl"><divclass="choose-image"@click="chooseImage"/></div>
</template><script>
import wx from 'weixin-js-sdk';
const imgUrl = require('../../common/assets/images/default-avatar.png')；export default {name: 'Card',components: {},props: {},data() {return {avatarUrl: imgUrl,};},computed: {},watch: {},mounted() {this.getWxConfigDatas();},methods: {getWxConfigDatas() {const params = {checkCode: getUrlParams().checkCode,  // 从地址栏获取checkCode用于校验signature};this.$http.get('/signature.json', { params }).then(res => {if (res.content.data && res.content.data.signature) {this.registereWxApi(res.content.data.signature);}});},registereWxApi(data) {wx.config({// debug: true,jsApiList: ['chooseImage', 'getLocalImgData'],appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,});},chooseImage() {let that = this;if (window.__wxjs_environment === 'miniprogram') {wx.miniProgram.getEnv(function(res) {if (res.miniprogram) {wx.checkJsApi({jsApiList: ['chooseImage', 'getLocalImgData'],success: function(res) {if (res.checkResult.chooseImage) {wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function(req) {wx.getLocalImgData({localId: req.localIds[0].toString(),success: function (res) {const localData = res.localData;let imageBase64 = '';if (localData.indexOf('data:image') == 0) {//苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接imageBase64 = localData;} else {//此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换//此时一个正常的base64图片路径就完美生成赋值到img的src中了imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');}that.avatarUrl = imageBase64;that.handleAvatar(that.dataURLtoBlob(imageBase64));}});},fail() {that.$toast.show({type: 'text',text: '选择头像失败！',});}});} else {that.$toast.show({type: 'text',text: '暂不支持修改头像！',});}},fail: function() {that.$toast.show({type: 'text',text: '暂不支持修改头像！',});},});} else {that.lgBridgeChooseImage();}});} else {that.lgBridgeChooseImage();}},handleAvatar(imageData) {let that = this;let param = new FormData();param.append('headPic', imageData);that.$http.post('/upload.json', {headers: {'Content-Type': 'multipart/form-data',},params: param,}).then(res => {if (parseInt(res.state, 10) === 1) {that.$toast.show({type: 'success',text: '上传成功！',});that.avatarUrl = res.content && res.content.data && res.content.data.url;}});},dataURLtoBlob(dataurl) {let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}}
};
</script><style lang="less" scoped>
.card-avatar {position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);width: 180px;height: 180px;border-radius: 100%;overflow: hidden;img {width: 100%;height: 100%;}.choose-image, input {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
}
</style>

公众号 h5 页面图片上传 wx.chooseImage使用相关推荐

微信公众号之（素材上传）群发消息
微信公众号之(素材上传)群发消息利用工作之余写写博客,看看博客是个学习的好方法哦! 微信公众号之素材上传群发消息第一步上传图片视频音频等第二步上传图文素材第三步进行群发第一步上传图片(视频. ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
公众号h5页面跳转到小程序
前言: 最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp 公众号h5页面跳转小程序呢,需要先关联下 ...
微信公众号H5页面开发怎么获取用户openid
微信公众号里会嵌套h5页面然后跳转,有时候我们就需要用到用户的openid,今天就为大家介绍一下公众号h5页面怎么获取openid 首先,需要用到公众号的appid,其次需要去公众号里配置好h5页面的 ...
微信公众号——永久素材的上传
微信公众号永久素材的上传思路:1.需要上传到本地(因为后面需要用的本地的绝对路径 2.上传到微信服务器 3.添加信息到本地数据库一.上传图片到本地文件上传的方法以下是我的代码首先更改文件上传 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
公众号客服头像上传-java
公众号客服头像上传:form-data格式亲测,可以直接使用 public String addCustomer(MultipartFile file, Integer publicNumberId ...
android h5选择图片上传,js-微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）...
值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage, 上传图片:wx.uploadImage. 2.上传图片的时候务必是一张一张的上传的(建议采用递归) 3.一张图片上传成功后 ...

公众号 h5 页面图片上传 wx.chooseImage使用

公众号 h5 页面图片上传 wx.chooseImage使用相关推荐

最新文章

热门文章

公众号 h5 页面 图片上传 wx.chooseImage使用

公众号 h5 页面 图片上传 wx.chooseImage使用相关推荐

最新文章

热门文章

公众号 h5 页面图片上传 wx.chooseImage使用

公众号 h5 页面图片上传 wx.chooseImage使用相关推荐