使用FileReader将输入文件数组转换为Base64 [英] Convert array of inputted files to base64 using FileReader

问题描述

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

这篇关于使用FileReader将输入文件数组转换为Base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！