Блог

У меня есть форма, которая позволяет пользователю вводить несколько файлов. Как только форма отправлена, я получаю список файлов, которые ввел пользователь, а затем конвертирую каждый файл в массиве в base64. У меня возникли проблемы с определением того, как именно выполнить последнюю часть — преобразовать каждый файл в массиве в base64, затем вернуть список. Вот что у меня есть на данный момент:

Написанный мной код не работает, но я думаю, что я на правильном пути (используя функцию map, FileReader и т.д.)

 <form id="sendEmailForm" onsubmit="handleFormSubmit(this)">

    <div class="custom-file">
        <input type="file" class="custom-file-input" id="images_input" name="images_input" multiple required>
        <label class="custom-file-label" for="images_input">Select images...</label>
    </div>

    <button type="submit">Submit</button>

</form>

<script>
    function handleFormSubmit(formObject) {
        // Get array of inputted images
        var images = formObject.images_input.files;
        
        // Somehow (?) iterate over images and return the base64 content of each image
        var base64Images = images.map(function (image) => {
            const fileReader = new FileReader();

            var base64Image = fileReader.onload = (image) => {
                return file.target.result.split(",")[1];
            };

            fileReader.readAsDataURL(image);
            return base64Image;
        });

        // Send base64Images to server
    }
</script>
  

Приветствуются любые рекомендации!

Привет, это асинхронная операция. Попробуйте обернуть это в Promise:

 function handleFormSubmit(formObject) {
  // Get array of inputted images
  const images = formObject.images_input.files;

  Promise.all(
    images.map(
      (image) =>
        new Promise((resolve, reject) => {
          const fileReader = new FileReader();

          fileReader.onload = (file) => {
            resolve(file.target.result.split(',')[1]);
          };

          fileReader.onerror = (error) => reject(error);

          fileReader.readAsDataURL(image);
        })
    )
  ).then((base64Images) => {
    // Send base64Images to server
  });
}