JavaScript FileReader.readAsDataURL() — файл у вигляді Data URL

Метод readAsDataURL() перетворює файл на Data URL — рядок data:image/png;base64,..., який можна одразу підставити в src.

правити

Загальний опис

Головна відмінність від URL.createObjectURL(): тут файл кодується в base64 й лежить прямо в рядку. А це означає, що рядок на третину більший за сам файл.

Для прев'ю зображення це майже завжди зайве: createObjectURL() дає посилання миттєво й без роздування.

Але Data URL має свою нішу — його можна зберегти: покласти в localStorage, віддати в JSON, вбудувати в CSS. Посилання з createObjectURL() живе лише доки жива сторінка.

правити

Нотатка

Base64 роздуває дані на ~33%. Для прев'ю великих фото це помітно — там правильніший URL.createObjectURL().

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
readAsDataURL	7+	3.6+	6+	12.1+	12+	10+

Підтримка: мобільні переглядачі

Переглядач
readAsDataURL	4.4+	yes	yes	6+

Приклади

+ запропонувати свій приклад у пісочниці

<img id="preview" width="120" alt="Прев'ю">

const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><rect width="120" height="60" fill="#9dcb4e"/></svg>';
const file = new Blob([svg], { type: 'image/svg+xml' });

const reader = new FileReader();

reader.onload = () => {
    // рядок, який можна показати І зберегти
    document.getElementById('preview').src = reader.result;
    console.log('Довжина data:-рядка (на ~33% більша за файл):', reader.result.length);
};

reader.readAsDataURL(file);

// для простого прев'ю краще без роздування:
// preview.src = URL.createObjectURL(file);