Конвертация Data URI в File и FormData для загрузки

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

Преобразовать Data URI в файл и включить его в FormData можно следующим образом:

function dataURItoFormData(dataURI, filename) {
  // Преобразуем данные, закодированные в формате base64
  let byteString = atob(dataURI.split(',')[1]);
  // Определить MIME-тип из Data URI
  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  // Формируем массив бинарных данных
  let ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }
  // Создаем файл из блоба
  let file = new File([ia], filename, {type: mimeString});
  
  // Создаем объект FormData и добавляем в него файл
  let formData = new FormData();
  formData.append('file', file);
  
  return formData;
}

// Пример использования
var formData = dataURItoFormData('data:image/png;base64,iVBORw0K...', 'image.png');

Процесс включает в себя декодирование base64, извлечение MIME-типа, формирование Blob и добавление его в FormData.

Процедура преобразования Data URI в файл

Давайте подробнее рассмотрим, как происходит преобразование данных.

Шаг 1: Разделение Data URI

Сначала необходимо разделить Data URI на MIME-тип и сегмент base64.

let dataURI_parts = dataURI.split(',');
let mimeString = dataURI_parts[0].split(':')[1].split(';')[0];

Затем следует декодировать base64:

let byteString = atob(dataURI_parts[1]);

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

Шаг 2: Формирование Blob

Создаем бинарное представление для блоба, преобразуем строку в Uint8Array.

let ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

Формируем Blob, указывая MIME-тип:

let blob = new Blob([ia], {type: mimeString});

Шаг 3: Подготовка FormData к отправке

Создаем FormData и добавляем в него блоб, как если бы это был файл:

let formData = new FormData();
formData.append('file', blob, filename);

Современный подход браузеров

В новейших версиях браузеров метод canvas.toBlob() упрощает создание Blob. В этом случае ручное преобразование не требуется:

canvas.toBlob(blob => {
  let formData = new FormData();
  formData.append('file', blob, 'image.png');
});

Если данный метод недоступен, используйте преобразование Data URI в качестве резервного варианта.

Fetch API как альтернатива

С помощью fetch API можно эффективно конвертировать base64 в блоб:

fetch(dataURI)
  .then(res => res.blob())
  .then(blob => {
    let formData = new FormData();
    formData.append('file', blob, 'image.png');
  });

Обеспечение совместимости с различными браузерами

Не забывайте поддерживать старые версии браузеров, наряду с изучением новых технологий:

• Используйте конструктор Blob, забывая об устаревшем BlobBuilder.
• Предпочитайте Uint8Array вместо ArrayBuffer при создании Blob.
• Используйте методы HTMLCanvasElement.prototype.toBlob и URL.createObjectURL() для обеспечения лучшей совместимости с различными браузерами.

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

Визуализируйте преобразование Data URI в файл и интеграцию в FormData следующим образом:

Data URI 🖼️🔗 Изображение в текстовом представлении | v 📜 Конвертируем в файл (Сворачиваем) | v 🌊 Добавляем в FormData (Загружаем) | v 💻 Отправляем через Интернет (Отправляем!)

Как будто вы скрутываете текст (Data URI), превращаете его в свиток (файл), кладете в бутылку (FormData) и отправляете плавать по цифровым волнам.

Чек-лист для разработчиков

Мы рассмотрели различные сценарии для обеспечения качества вашего кода.

Обработка изображений в браузерах семейства WebKit

Уникальные реализации браузеров WebKit учтены в нашей функции dataURItoFormData за счет их специфических особенностей.

Адаптация к мобильным устройствам

Поскольку WebKit широко распространен в ОС iOS, данный подход идеально подходит для загрузки Data URI из элементов canvas в мобильных приложениях.

Работа с большими файлами

Важно работать аккуратно с большими Data URI – здесь критически важна производительность. Для облегчения работы интерфейса используйте оптимизированные движки JavaScript или веб-воркеры.

Отладка

Проверяйте ошибки, связанные с некорректно сформированными MIME-типами, неверными строками base64 или различиями в реализации Blob в разных браузерах. Валидация и корректная обработка ошибок здесь имеют ключевое значение.

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

1. FormData – Веб API | MDN — Обзор по работе с FormData.
2. Blob – Веб API | MDN — Подробности об объекте Blob.
3. Canvas API – Веб API | MDN — Как использовать Canvas для работы с Data URI.
4. Создание Blob из строки base64 в JavaScript – Stack Overflow — Дискуссия о конверсии base64 в Blob.
5. File API — Стандарты для работы с файлами.
6. Как использовать FormData для отправки файла через AJAX? – Stack Overflow — Рекомендации по добавлению объектов File в FormData.
7. HTML Standard — Официальное руководство по созданию FormData.