1. Преобразовать base64 в файл
В js вы можете использовать объект Blob для преобразования строки base64 в объект File.
Способ 1. Преобразование base64 непосредственно в объект File:
Сначала вам нужно получить тип файла из строки base64, а затем преобразовать тип файла и строку base64 в объект Blob. Наконец, создайте объект File с помощью конструктора объектов Blob.
Вот пример функции, которая принимает строку base64 и имя файла и возвращает объект File:
function base64ToFile(base64, fileName) {
let arr = base64.split(",");
let mime = arr[0].match(/:(.\*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], fileName, { type: mime });
}
Обратите внимание, что atobи Uint8Arrayдоступны во всех современных браузерах. В старых браузерах вместо этих двух функций необходимо использовать другие библиотеки.
Если вам нужно проверить, поддерживается ли тип файла перед использованием этой функции, вы можете добавить в функцию код проверки типа файла.
Способ 2: сначала преобразовать base64 в BLOB-объект, а затем преобразовать BLOB-объект в файл:
В JavaScript вы можете использовать объект Blob для преобразования строки base64 в blob, объект двоичных данных.
Сначала используйте atob()функцию для base64декодирования строки в двоичную строку. Затем используйте Uint8Arrayконструктор для преобразования двоичной строки в массив байтов. Наконец, Blobновый Blobобъект создается с помощью конструктора с массивом байтов в качестве первого аргумента.
1. Сначала преобразуйте base64 в Blob:
// 将 base64 转换为 Blob
function base64ToBlob(base64) {
var arr = base64.split(","),
mime = arr[0].match(/:(.\*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
}
Построенный подобным образом объект Blob может использоваться как бинарный файл, передаваться в FileReader в качестве параметра, загружаться на сервер через объект FormData и т.д.
Обратите внимание, что atob и Uint8Array доступны во всех современных браузерах. В старых браузерах вместо этих двух функций необходимо использовать другие библиотеки.
Если вам нужно проверить, поддерживается ли тип файла перед использованием этой функции, вы можете добавить в функцию код проверки типа файла.
Кроме того, в HTML5 вы можете использовать метод toBlob() элемента canvas для преобразования изображения в объект Blob. Этот метод основан на элементе HTMLCanvasElement. После преобразования изображения в base64 вы можете использовать метод canvas для преобразования изображения в объект Blob. нарисуйте изображение на элементе холста, а затем используйте метод toBlob(), чтобы получить объект Blob.
Существуют также некоторые сторонние библиотеки, такие как FileSaver.js, которые можно использовать для локального сохранения объектов Blob.
Эти методы могут достигать той же цели и могут быть выбраны в соответствии с используемой в проекте средой JavaScript и требуемой сложностью.
В JavaScript объект Blob можно преобразовать в объект File с помощью конструктора File.
Этот конструктор принимает два параметра: первый параметр — объект Blob или ArrayBuffer, а второй параметр — имя файла.
2. Затем преобразуйте BLOB-объект в файл:
function blobToFile(blob, fileName) {
return new File([blob], fileName);
}
Поскольку Blob является надмножеством File, вы можете напрямую преобразовать объект Blob в объект File, поэтому вы можете использовать различные методы объекта File, такие как получение имени файла, типа и т. д.
Поскольку это новый API, он может быть недоступен в некоторых браузерах, а также можно использовать сторонние библиотеки для совместимости со старыми браузерами.
Два, Файл => base64
Способ 1. Файл напрямую конвертируется в 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"));
};
});
}
Способ 2: сначала преобразовать файл в BLOB-объект, а затем преобразовать BLOB-объект в base64:
1. Сначала преобразуйте файл в 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:
Данные BLOB-объекта можно прочитать и преобразовать в DataURL с помощью объекта FileReader. URL-адрес данных — это схема URL-адресов в кодировке Base64, которую можно использовать для встраивания изображений или других ресурсов в веб-страницы.
Вот пример кода, который преобразует объект 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, который, наконец, возвращает строку base64. Внутри функции создается объект FileReader и вызывается его метод readAsDataURL для чтения объекта Blob как DataURL. После прочтения мы используем метод разрешения объекта Promise, чтобы извлечь строку base64 в DataURL и вернуть ее. Если во время чтения возникает ошибка, объект Promise отклоняется с помощью метода reject.