在微信公众号调用微信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()
Logo

加入社区!打开量化的大门,首批课程上线啦!

更多推荐