小程序和H5上传图片转成Base64格式
文章目录
前言
由于这次移动图片上传需要使用base64
我们移动端需要兼容小程序和H5（后期打包成APP）
一、Base64是什么？
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法，由于 2^6=64，所以每 6 个比特为一个单元，对应某个可打印字符。
Base64 常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。
二、Base转换
小程序的转换
代码如下（示例）：
const fileToBase64 = filePath => {
return new Promise(resolve => {
let fileManager = Taro.getFileSystemManager();
fileManager.readFile({
filePath,
encoding: 'base64',
success: e => {
resolve(`data:image/jpg;base64,${
e.data}`);
},
});
});
};
小程序使用getFileSystemManager来获取文件管理器，使用 fileManager.readFile() 方法读取指定路径的文件内容。通过设置 encoding 参数为 ‘base64’，将文件内容以 base64 编码的形式进行读取。
H5的转换
代码如下（示例）：
const Tobase64 = async path => {
try {
const result = await Taro.request({
url: path,
responseType: 'arraybuffer',
});
if (result && result.statusCode !== 200) {
Taro.getLogManager().warn('图片获取失败', result);
throw new Error('图片获取失败。');
}
const arrayBuffer = result.data;
let binary = '';
const bytes = new Uint8Array(arrayBuffer);
for (let i = 0; i < bytes.byteLength; i++) {
binary += String.fromCharCode(bytes[i]);
}
let base64 = btoa(binary);
base64 = 'data:image/jpeg;base64,' + base64;
return base64;
} catch (error) {
console.warn('=> utilssearch.ts error imgToBase64', error);
throw error;
}
};
H5接受一个参数 path，表示图片的路径。函数内部使用 request 方法发送请求，获取图片的二进制数据。然后将二进制数据转换为 base64 编码，并拼接上图片的类型信息，最后返回生成的 base64 字符串。
使用
if (process.env.TARO_ENV === 'h5') {
file = await Tobase64(v.url);
} else {
file = await fileToBase64(v.url);
}
判断是小程序还是H5的调用对应的方法。
总结
根据场景的不同转换的方式也不一样，在小程序和H5转换的方式也不一样。以上把小程序和H5的转换的方式都列出了，方便有需要的小伙伴使用。