微信公众号调用微信chooseImage api 遇到的坑
·
在微信公众号调用微信chooseImage 在微信开发者工具上正常通过getLocalImgData 获取到base64位图片可正常使用,在真机上获取到的base64缺失data:image/jpeg;base64
import wx from 'weixin-js-sdk'
import {
wxSign,
fileUploadData
} from '@/api/api';
export async function upLoadImg(){
return await new Promise((resolve, reject) => {
wxConfig(['chooseImage','getLocalImgData']).then(result=>{
console.log("result",result)
wx.chooseImage({
count: 1, // 默认9 // 此处可以动态传参
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: async function (res) {
// 选择图片后获取到图片id
if (res.localIds && res.localIds.length) {
let newArr = []
for (let i = 0; i < res.localIds.length; i++) {
let url2 = await getLocalImgDataUrl(res.localIds[i])
newArr.push(url2)
}
resolve(newArr);
} else {
resolve([])
}
}
})
})
})
}
// 微信接口注册
function wxConfig(jsApiList){
return new Promise((resolve, reject) => {
wxSign().then(res=>{
// wxSign为调用后台接口 可自行替换
if(res.code == 200){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: import.meta.env.VITE_APP_APP_ID, // 必填,公众号的唯一标识
timestamp: res.result.timestamp, // 必填,生成签名的时间戳
nonceStr: res.result.nonceStr, // 必填,生成签名的随机串
signature: res.result.signature, // 必填,签名
jsApiList: jsApiList
})
wx.ready(res1 => {
resolve(res1)
})
wx.error(err => {
reject(err)
})
}else{
reject(null)
}
})
})
}
// 通过id调用微信接口 getLocalImgData 获取到base64 坑就在这里 真机与开发者工具获取到base64不一致
function getLocalImgDataUrl(id){
return new Promise((resolve, reject) => {
let localId = id;
wx.getLocalImgData({
localId: localId, // 图片的localID
success: async function (res) {
let localData = res.localData;
if (localData.indexOf("data:image/jpeg;base64,") < 0) {
// 判断是否有这样的头部 真机没得这个头部
localData = "data:image/jpeg;base64," + localData;
}
let url = ''
if (localData) {
url = await dataURLtoFile(localData);
}
resolve(url)
},
})
})
}
// 把base64转换为FormData并上传
async function dataURLtoFile(localData) {
// 将base64转换为文件
var bytes = window.atob(localData.split(',')[1]);
var array = [];
for (var i = 0; i < bytes.length; i++) {
array.push(bytes.charCodeAt(i));
}
var blob = new Blob([new Uint8Array(array)], {
type: 'image/jpeg'
});
var fd = new FormData();
fd.append('file', blob, Date.now() + '.jpg');
// 此处为后台的上传接口,可自行替换
let res = await fileUploadData(fd); // 上传附件
if (res.success) {
showSuccessToast("上传成功!")
return res.message
} else {
showFailToast(res.message)
return ''
}
}
// 最后按钮调用 upLoadImg() 就可以
upLoadImg()
更多推荐




所有评论(0)