编码转换自由之File、Base64与Blob之间的切换技巧

JavaScript中，File、Base64与Blob这三个类型的数据类型经常需要进行互相转换。File对象通常用于处理本地文件，Base64是一种二进制数据编码格式，Blob对象是一种表示文件或二进制数据的类型。

File 转 Base64

// 方法一：使用 FileReader API
const file = new File(['Hello world!'], 'test.txt', { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => {
  const base64 = reader.result;
  // 处理base64编码数据
};
reader.readAsDataURL(file);

// 方法二：使用 Blob API
const file = new File(['Hello world!'], 'test.txt', { type: 'text/plain' });
const blob = new Blob([file]);
const reader = new FileReader();
reader.onload = () => {
  const base64 = reader.result;
  // 处理base64编码数据
};
reader.readAsDataURL(blob);

Base64 转 File

// 方法一：使用 Blob API
const base64 = 'data:text/plain;base64,SGVsbG8gd29ybGQh';
const blob = new Blob([atob(base64.split(',')[1])], { type: base64.split(',')[0].split(':')[1].split(';')[0] });
const file = new File([blob], 'test.txt', { type: 'text/plain' });

// 方法二：使用 FileReader API
const base64 = 'data:text/plain;base64,SGVsbG8gd29ybGQh';
const blob = new Blob([atob(base64.split(',')[1])], { type: base64.split(',')[0].split(':')[1].split(';')[0] });
const reader = new FileReader();
reader.onload = () => {
  const file = new File([reader.result], 'test.txt', { type: 'text/plain' });
  // 处理File对象
};
reader.readAsArrayBuffer(blob);

Blob 转 File

const blob = new Blob(['Hello world!'], { type: 'text/plain' });
const file = new File([blob], 'test.txt', { type: 'text/plain' });

通过本文介绍，您可以轻松掌握File、Base64与Blob编码之间的相互转换。灵活应用这些转换技巧，可以大大提升编码转换的效率和准确性，助您轻松应对各种场景下的数据处理需求。