Как преобразовать несколько файлов с поля мультизагрузки файлов в Base64 и передать результат конвертации на сервер единым массивом?

Question

[Tom Dropov]

Имеется форма с мультизагрукой файлов. Мне нужно преобразовать файлы в Base64 и передать массив данных на сервер. Пробовал преобразовать FileList в Array и с помощью foreach перебрать данные с целью конвертации в Base64 и отправки этого результата на сервер, но такое решение не работает. Проблем с конвертацией и отправкой на сервер одного файла нет, а вот с конвертацией и отправкой более одного файла как единый массив возникают трудности. Может кто-то сталкивался с подобным и может подсказать как лучше и правильно это реализовать?

Код:

document.addEventListener('DOMContentLoaded', () => {
    // Поле загрузки файла
    const inputFilePhoto = document.querySelector('.js-add-photo-new-car');
    // Основная форма с данными
    const obProfileForm = document.querySelector('.js-lk-garage-new-car-form');
    obProfileForm.addEventListener('submit', (e) => {
        e.preventDefault();
        // Данные с формы
        const formData = new FormData(obProfileForm);
        // Первая фотография из поля с файлом
        const filePhoto = inputFilePhoto.files[0];
        // Все фотографии из поля с файлом
        const arrFiles = inputFilePhoto.files;
        // Если в поле для файла присутствует картинка, то:
        if (arrFiles) {
            // Читаем файл и конвертируем в base64
            const readeFile = new FileReader();
            readeFile.onload = () => {
                // Заносим результат конвертации
                const fileBase64 = readeFile.result; // Файл в base64
                // Добавляем дополнительные данные для отправки на сервер
                formData.append('sessid', BX.message('bitrix_sessid'));
                formData.append('PHOTO', fileBase64);
                // AJAX-запрос
                addPersonalAuto(formData);
            }
            readeFile.readAsDataURL(arrFiles[0]);
            readeFile.readAsDataURL(arrFiles[1]);
            // Иначе, просто отправляем данные на сервер без конвертации и фотографии
        } else {
            formData.append('sessid', BX.message('bitrix_sessid'));
            addPersonalAuto(formData);
        }
    });
});

<input type="file" name="PHOTO" class="js-add-photo-new-car" multiple>

console.log:

Comments

[Алексей Ярков]

Мне нужно преобразовать файлы в Base64 и передать массив данных на сервер

Это точно нужно? Зачем массив файлов в строку перегонять?

Answer 1

[Tom Dropov]

Мою проблему решил chatGPT :)

document.addEventListener('DOMContentLoaded', () => {
  const inputFilePhoto = document.querySelector('.js-add-photo-new-car');
  const obProfileForm = document.querySelector('.js-lk-garage-new-car-form');

  obProfileForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const formData = new FormData(obProfileForm);
    const filePhoto = inputFilePhoto.files[0];
    const arrFiles = inputFilePhoto.files;

    if (arrFiles) {
      try {
        const fileBase64Promises = Array.from(arrFiles).map((file) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          return new Promise((resolve, reject) => {
            reader.onload = () => {
              resolve(reader.result);
            };
            reader.onerror = () => {
              reject(reader.error);
            };
          });
        });
        const fileBase64Arr = await Promise.all(fileBase64Promises);
        fileBase64Arr.forEach((fileBase64) => {
          formData.append('PHOTO', fileBase64);
        });
      } catch (error) {
        console.error('Error reading file:', error);
      }
    }

    formData.append('sessid', BX.message('bitrix_sessid'));
    addPersonalAuto(formData);
  });
});

Вот краткое изложение изменений:

Средство чтения файлов теперь обернуто обещанием, чтобы упростить асинхронное чтение файлов.
Код теперь поддерживает загрузку нескольких файлов.
Метод readAsDataURL() теперь вызывается только один раз для каждого файла, а не дважды, как в исходном коде.
Переменная filePhoto не используется, поэтому она была удалена.
Блок if (arrFiles) был упрощен, чтобы уменьшить дублирование кода.
Объект FormData обновляется только параметром sessid и параметром PHOTO после чтения файлов, чтобы уменьшить дублирование кода.
Функция addPersonalAuto() вызывается с объектом formData в качестве единственного параметра, чтобы код оставался кратким.