h5调用微信jssdk chooseImage选择相册转file上传图片到服务器

话不多说，先上步骤

1.绑定域名、引入jssdk、通过config接口注入权限验证配置

详细见微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10

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

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

2.拍照或从手机相册中选图接口

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

3.获取本地图片接口

安卓、ios通用

wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示}
});

4.判断生成的localData头部

if (localData.indexOf('data:image') != 0) {//判断是否有这样的头部localData = 'data:image/jpeg;base64,' + localData;}localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg'); // 此处的localData 就是你所需要的base64位

5.base64转file文件流

filename参数必填，可以为其他值，举例为‘weixin’

let file = this.dataURLtoFile(localData);
dataURLtoFile(dataurl: any, filename: any = 'weixin') {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });}

经过转换得到的值为file文件流了，然后自行下一步操作，接入微信操作完毕

问题

可以打开debug调试，设置debug：true
在手机微信上测试可以设置一下VConsole调试h5页面，链接：http://debugx5.qq.com/
接下来我说一下我遇到的一些问题，仅供参考：

1.config:invalid url donmain

该问题为不在安全域名导致错误，在本地调试时可以在公众号加上调试地址或者在公众号填写的安全域名下测试

2.permission denied

该问题可能为：1.不在安全域名；2.公众号没有调用相册权限；3.传入的JSAPIList没有加入‘chooseImage’，
可以采取排除法

详细代码（Vue）

1. model层

chooseImage(link = location.href) {return Promise.all([this.getSign(link), this.init()]).then(([Sign, wx]) => {wx.config(Sign);return new Promise(resolve => {wx.ready(() => {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: (res: any) => {console.log(res.localIds, 'localIds');let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片resolve(localIds[0]);}});});}).then(localId => {return new Promise(resolve => {wx.getLocalImgData({localId: localId, //图片的本地IDsuccess: (res: any) => {let localData = res.localData;if (localData.indexOf('data:image') != 0) {//判断是否有这样的头部localData = 'data:image/jpeg;base64,' + localData;}localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg'); // 此处的localData 就是你所需要的base64位let file = this.dataURLtoFile(localData);console.log(file, 'resolve file');resolve(file);}});});});});}dataURLtoFile(dataurl: any, filename: any = 'weixin') {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });}

2.view 层

data() {return {attachments: []};},
methods: {previewImagesWeixin() {this.$Model.Wechat.chooseImage().then(file => {// 这是获取到的本地file文件console.log(file, URL.createObjectURL(file), 'weixin chooseImage');// 传入附件this.attachments.push({type: 'pictures',url: URL.createObjectURL(file),file: file});});},
}

h5调用微信jssdk chooseImage选择相册转file上传图片到服务器相关推荐

Vue调用微信JSSDK上传图片(wx.uploadImage)
Vue页面调用微信API上传图片由于原生input上传图片无法在选择图片时控制选择的张数,所以选择调用微信JSSDK提供的方法调用相册选择图片进行上传.选择图片后上传到微信服务器,然后通知后台去微信 ...
调用微信jssdk踩坑日记
1.IP白名单设置调用微信jssdk需要初始化wx对象 wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可 ...
微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
h5接微信js-sdk的详细步骤
h5接微信js-sdk的详细步骤 JS-SDK配置流程(前端需要做的) 1.配置JS安全域名 2.服务接入 3.引入Js文件 4.使用wx.config进行权限验证 5.代码 JS-SDK配置流程(后 ...
h5调用安卓原生相机、相册、电话、录像，且兼容安卓系统8.0
前言安卓原生组件webview加载h5的URL,若要h5调用安卓原生相机和相册有效需要做以下操作. 测试机:魅蓝note2 系统5.1.1 华为荣耀畅玩7x 系统8.0.0 一.h5页面相关方 ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（下篇）
1. 获取微信用户基本信息 2. vue接入微信JS-SDK 环境: 前端:vue2.0 后台:node.js 公众号:微信提供的测试号以分享至微信和分享至朋友圈为例. 微信网页接入微信JS-SDK ...
h5调用微信sdk步骤
h5调用微信sdk步骤步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在& ...
调用微信JS-SDK接口上传图片
最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...