如何通过单文件输入框将两张图片以DataURL存入LocalStorage

问题原因 #

你遇到的错误有两个核心原因：

1. 同一个FileReader实例不能重复调用readAsDataURL：FileReader是异步操作，重复调用会中断正在进行的读取流程，导致后续读取失败。
2. 未校验文件数量：如果用户只选择了1张图片，this.files[1]会是undefined，不符合readAsDataURL要求的Blob类型参数，直接调用就会抛出类型错误。

完整解决方案代码 #

首先确保你的文件输入框开启多选功能：

<input type="file" id="input-image" accept="image/*" multiple>
<div id="previousWeek"><img id="previousImage" alt="上周图片"></div>
<div id="nextWeek"><img id="nextImage" alt="下周图片"></div>

然后修改JS代码，针对每个文件创建独立的FileReader，并做文件数量校验：

// 监听文件选择事件
document.querySelector("#input-image").addEventListener("change", function () {
  // 获取选中的文件列表，最多取前2张
  const files = Array.from(this.files).slice(0, 2);
  
  // 处理第一张图片（previous-image）
  if (files[0]) {
    const prevReader = new FileReader();
    prevReader.addEventListener("load", () => {
      localStorage.setItem("previous-image", prevReader.result);
      // 实时更新页面展示
      document.querySelector("#previousImage").setAttribute("src", prevReader.result);
    });
    prevReader.readAsDataURL(files[0]);
  }

  // 处理第二张图片（next-image）
  if (files[1]) {
    const nextReader = new FileReader();
    nextReader.addEventListener("load", () => {
      localStorage.setItem("next-image", nextReader.result);
      // 实时更新页面展示
      document.querySelector("#nextImage").setAttribute("src", nextReader.result);
    });
    nextReader.readAsDataURL(files[1]);
  }
});

// 页面加载时从LocalStorage恢复图片
document.addEventListener("DOMContentLoaded", () => {
  const prevImageData = localStorage.getItem("previous-image");
  if (prevImageData) {
    document.querySelector("#previousImage").setAttribute("src", prevImageData);
  }

  const nextImageData = localStorage.getItem("next-image");
  if (nextImageData) {
    document.querySelector("#nextImage").setAttribute("src", nextImageData);
  }
});

关键注意事项 #

• 文件输入框必须加multiple属性：否则用户无法一次性选择多张图片。
• 限制文件数量：用slice(0,2)确保只处理前两张图片，避免多余文件干扰。
• 独立FileReader实例：每个文件对应一个FileReader，避免异步操作冲突。
• LocalStorage容量限制：图片转成base64后体积会变大（约为原图片的1.3倍），如果图片过大可能超出LocalStorage的存储上限（一般为5MB），这种情况建议改用其他存储方案。

内容的提问来源于stack exchange，提问作者JoyBhalla