Конвертация файла в base64 в JavaScript и TypeScript

Быстрый ответ

Для перевода файла в формат base64 при помощи JavaScript воспользуйтесь методом readAsDataURL, которым обладает объект FileReader. Примените этот метод к указанному файлу и воспользуйтесь обработчиком события onload для получения закодированной строки. Вот пример кода:

function convertToBase64(file, onSuccess) {
    const reader = new FileReader();
    reader.onload = () => onSuccess(reader.result);
    reader.readAsDataURL(file);
}

document.querySelector('input[type="file"]').onchange = (e) => {
    convertToBase64(e.target.files[0], (base64) => console.log(base64));
};

Теперь выберите файл, чтобы получить его содержимое в формате base64.

Примечание о async/await

async/await позволяет составлять более чистый и упорядоченный асинхронный код на JavaScript. В нашем случае функцию можно адаптировать к этому стилю следующим образом:

async function convertToBase64Async(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
        reader.readAsDataURL(file);
    });
}

(async () => {
    try {
        const file = document.querySelector('input[type="file"]').files[0];
        const base64 = await convertToBase64Async(file);
        console.log(base64);
    } catch (error) {
        console.error('Ошибка при переводе файла:', error);
    }
})();

В данной реализации Promise оборачивает функцию FileReader, тем самым позволяет дождаться результата её выполнения.

Визуализация

Перевод файла в base64 в JavaScript можно сравнить с процессом добычи золота из железной руды.

Файл (🪙) ➡️ FileReader (⚙️) ➡️ Перевод в Base64 (🥇)

Процесс выглядит следующим образом:

let rawIron = new FileReader(); // Подготовка машины (⚙️)
rawIron.readAsDataURL(file);    // Погружаем руду (🪙)

rawIron.onload = function() {
    let gold = rawIron.result; // Превращение в золото (🥇)
};

Ключевой момент состоит в том, что с помощью FileReader вы получаете base64 из file.

Решение возможных проблем

В процессе работы с FileReader могут возникнуть некоторые трудности...

Доступ к файлу

Удостоверьтесь, что вы получили правильный доступ к объекту File и он не занят другими процессами.

Подробнее об этом расскажет наш спикер на видео

Обработка ошибок

Обязательно обработайте событие onerror, чтобы иметь возможность отловить и обработать ошибки, которые могут возникнуть в процессе чтения файла.

Объем файлов

Обработка больших файлов может негативно сказаться на производительности. Рекомендуется в этом случае показывать индикатор загрузки или использовать веб-воркеры для клиентской обработки больших файлов.

Безопасность

Следите за тем, чтобы входящие файлы не содержали вредоносных данных, которые могут проникнуть через base64-строки, особенно, если исходный файл не является надежным.

Продвинутые методы и учет TypeScript

TypeScript и типизация

В TypeScript доступна типизация, что позволит указать тип переводимого файла:

async function convertToBase64Async(file: File): Promise<string> {
    // Реализация аналогична JavaScript, но с преимуществами TypeScript
}

Обработка результатов

Часто требуется базовый base64-код без метаданных в префиксе (data:*/*;base64,). Для его получения можно использовать такой вариант:

const base64DataOnly = base64String.split(',')[1];

В некоторых ситуациях также может потребоваться учитывать или корректировать дополнение base64.

Минимизация зависимостей

Важно стремиться к минимизации зависимостей, используя встроенные API, такие как FileReader, поддерживаемые современными браузерами.

Полезные материалы

1. FileReader – Web API | MDN — полное руководство по использованию API FileReader.
2. Как перевести файл в base64 с использованием JavaScript? – Stack Overflow — обсуждения и решения, одобренные сообществом.
3. Base64-кодирование "javascript" – Online — учебник по кодированию и декодированию в base64 в JavaScript.
4. Data URIs | CSS-Tricks — статья о теории и практике использования Data URIs в формате Base64.
5. Чтение файлов в JavaScript | Статьи | web.dev — обзор работы с FileReader и файлами в JavaScript.
6. Buffer | Документация Node.js v21.6.1 — описание использования Buffer для кодирования в base64 в Node.js.
7. Кодирование ArrayBuffer в строку base64 · GitHub — здесь доступен пример кода для кодирования ArrayBuffer в base64.