javascript - 使用 FileReader 将输入文件数组转换为 base64

Question

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

任何指导表示赞赏!

Answer 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
  });
}