拖拽图片触发FileReader需监听drop事件并阻止默认行为，从e.dataTransfer.files取File对象，用file.type.startsWith('image/')校验类型，每个文件新建独立FileReader实例，readAsDataURL异步完成后再使用result。

拖拽图片到页面时如何触发 FileReader 读取

必须监听 drop 事件并阻止默认行为，否则浏览器会直接跳转到图片地址或下载。关键在于从 event.dataTransfer.files 中提取 File 对象，而非 event.dataTransfer.items（后者在部分场景下可能为空或需额外处理）。

• 只允许处理 image/* 类型的 File，用 file.type.startsWith('image/') 判断更稳妥，比正则或后缀检查兼容性更好
• FileReader 是异步的，readAsDataURL 完成后才能拿到 base64 字符串，不能在 reader.readAsDataURL(file) 后立刻访问 reader.result
• 多个文件时，每个 File 都要新建独立的 FileReader 实例，复用会导致状态混乱

用 FileReader.readAsDataURL 预览图片的最小可行代码

以下代码片段可直接插入 HTML 页面的 中运行，支持单图或多图拖入，自动创建 并插入页面顶部：

const dropArea = document.body;
dropArea.addEventListener('dragover', e => e.preventDefault());
dropArea.addEventListener('drop', e => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  files.forEach(file => {
    if (!file.type.startsWith('image/')) return;
    const reader = new FileReader();
    reader.onload = () => {
      const img = document.createElement('img');
      img.src = reader.result;
      img.style.maxWidth = '300px';
      img.style.margin = '8px';
      document.body.insertBefore(img, document.body.firstChild);
    };
    reader.readAsDataURL(file);
  });
});

为什么 FileReader 有时读不出图片或报错

常见失败不是因为 API 写错，而是环境或数据本身异常：

• FileReader 的 onerror 回调不抛出错误对象，而是设置 reader.error，需手动检查：if (reader.error) console.error(reader.error)
• 用户拖入的是文件夹（file.type === ''）、快捷方式、或系统临时文件（如 macOS 的 .DS_Store），这些都会导致 readAsDataURL 静默失败
• Chrome 在某些沙盒环境下（如 iframe 无 allow="clipboard-read"`）可能限制 dataTransfer.files 访问，此时 files.length === 0
• 大图（如 >100MB）可能导致内存溢出或长时间卡顿，FileReader 不提供进度回调，无法优雅降级

替代方案：用 URL.createObjectURL 更快预览但要注意释放

如果只是预览、不需要 base64（比如后续不上传或不存档），URL.createObjectURL(file) 比 FileReader 更快且无大小限制，但必须手动调用 URL.revokeObjectURL() 避免内存泄漏：

reader.onload = () => {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(file); // ← 直接用 blob URL
  img.onload = () => URL.revokeObjectURL(img.src); // ← 加载成功后立即释放
  document.body.insertBefore(img, document.body.firstChild);
};

注意：blob URL 只在当前文档生命周期内有效，刷新即失效；而 base64 字符串是纯文本，可持久化保存或跨域传输。