使用 FileReader 将输入文件数组转换为 base64答案

【问题标题】：Convert array of inputted files to base64 using FileReader使用 FileReader 将输入文件数组转换为 base64
【发布时间】：2020-08-19 16:37:48
【问题描述】：

我有一个允许用户输入多个文件的表单。提交表单后，我会获取用户输入的文件列表，然后将数组中的每个文件转换为 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>

感谢任何指导！

【问题讨论】：

标签： javascript html forms filereader fileapi

【解决方案1】：

您好，这是一个异步操作。尝试将其包装在 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
  });
}

【讨论】：