二进制图片之间的互相转换 - File转换成base64的两种方式

想看base64转file文件的两种方式的小伙伴，可以看上篇：

二进制图片之间的互相转换 - base64转file文件的两种方式

File 直接转换为 base64

使用 FileReader 对象将 File 对象转换为 base64 编码的字符串。以下是一个简单的 JavaScript 代码示例：

function fileToBase64(file) { return new Promise((resolve, reject) => { // 创建一个新的 FileReader 对象 const reader = new FileReader(); // 读取 File 对象 reader.readAsDataURL(file); // 加载完成后 reader.onload = function () { // 将读取的数据转换为 base64 编码的字符串 const base64String = reader.result.split(",")[1]; // 解析为 Promise 对象，并返回 base64 编码的字符串 resolve(base64String); }; // 加载失败时 reader.onerror = function () { reject(new Error("Failed to load file")); }; });}

File 先转换为 Blob，再由 Blob 转换为 base64

1. 先将 File 转换为 Blob：

File 对象本身就是一种特殊类型的 Blob 对象，因此将 File 转换为 Blob 可以直接使用 File 对象。

如果需要将 Blob 对象转换为另一种 Blob 对象，可以使用 Blob 构造函数，将原始 Blob 对象作为参数传递，然后使用新构造出来的 Blob 对象进行操作。以下是一个将 File 对象转换为 Blob 对象的示例代码：

function fileToBlob(file) { return new Blob([file], { type: file.type });}

2. 再将 Blob 转换为 base64：

可以使用 FileReader 对象读取 Blob 数据并转换为 DataURL。Data URL 是一种基于 Base64 编码的 URL 方案，可以用于在网页中嵌入图片或其他资源。

以下是一个将 Blob 对象转换为 base64 字符串的示例代码：

function blobToBase64(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => resolve(reader.result.split(",")[1]); reader.onerror = reject; });}

上述代码中的 blobToBase64 函数接收一个 Blob 对象作为参数，并返回一个 Promise 对象，该 Promise 对象最终返回一个 base64 字符串。在函数内部，创建了一个 FileReader 对象，并调用其 readAsDataURL 方法将 Blob 对象读取为 DataURL。在读取完成后，我们使用 Promise 对象的 resolve 方法将 DataURL 中的 base64 字符串提取出来并返回。如果读取过程中出现错误，则使用 reject 方法拒绝 Promise 对象。