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, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
3.获取本地图片接口
安卓、ios通用
wx.getLocalImgData({
localId: '', // 图片的localID
success: 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, // 默认9
sizeType: ['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, //图片的本地ID
success: (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
});
});
},
}
最后，有遇到选择相册问题的前端小伙伴可以加我vx讨论呀：a917374716