FileReader读取本地图片应使用readAsDataURL()并将结果赋给img的src，需在onload回调中获取reader.result，每个文件需新建FileReader实例，避免复用；也可用URL.createObjectURL()提升性能但需手动释放。
FileReader 读取本地图片后怎么显示在页面上
直接用 FileReader 的 readAsDataURL()，读完把结果赋给 <img alt="HTML怎么预览本地图片_HTML FileReader读取方法【介绍】" > 的 src 就行。别用 readAsText() 或手动拼 base64 前缀——它会自动加 data:image/xxx;base64,，多加一遍就变无效 URL。
常见错误现象：<img src="data:," alt="HTML怎么预览本地图片_HTML FileReader读取方法【介绍】" > 空白、控制台没报错但图不显示、预览一闪而过。
- 确保
onload回调里才取reader.result，reader.readAsDataURL(file)是异步的，不能写在后面直接读 - 文件对象必须来自用户主动触发的 input（比如
<input type="file">），否则浏览器会拒绝读取（安全限制） - 如果选了大图（比如 >5MB），
FileReader不报错但加载慢，<img alt="HTML怎么预览本地图片_HTML FileReader读取方法【介绍】" >可能长时间空白，建议加 loading 状态或尺寸占位
HTML input file 多图上传时 FileReader 怎么逐个处理
别在循环里复用同一个 FileReader 实例。每个文件都要 new 一个新实例，否则回调里的 this.result 会错乱，大概率只显示最后一张。
使用场景：用户一次选了 3 张图，要挨个预览缩略图。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
for (const file of e.target.files)遍历，每次循环const reader = new FileReader() -
reader.onload里生成<img alt="HTML怎么预览本地图片_HTML FileReader读取方法【介绍】" >并 append 到容器，不要等所有文件读完再统一渲染 - 注意
e.target.files是FileList，不是数组，要用Array.from()或展开运算符才能用forEach
为什么 FileReader onload 有时不触发
最常见原因是文件为空或路径非法——但本地 input 选图基本不会空；真正容易踩的是：监听写在了 reader 创建之前，或者绑了 onerror 却没处理，导致错误被吞掉。
错误信息示例：Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'，说明传了非 File/Blob 对象。
- 检查传给
readAsDataURL()的是不是File实例（file instanceof File） - 监听必须在
readAsDataURL()调用前设置，顺序错了就收不到事件 - 加上
reader.onerror = () => console.error(reader.error)，很多静默失败靠这个才暴露
用 URL.createObjectURL 替代 FileReader 行不行
可以，而且更快，尤其预览大图时更推荐。但它生成的是临时 URL，不是 base64 字符串，所以不用等异步读取，也不占内存做编码。
性能影响：不触发主线程 base64 编码，预览响应更快；但页面关闭前得手动 URL.revokeObjectURL()，否则内存泄漏。
-
const url = URL.createObjectURL(file)，直接赋给<img src alt="HTML怎么预览本地图片_HTML FileReader读取方法【介绍】" > - 记得在不需要时调用
URL.revokeObjectURL(url)，比如组件卸载、换图前 - 不兼容 IE10 及以下，如果还要支持就得 fallback 到
FileReader
base64 和 blob URL 的核心区别就在这儿：一个是数据内联、可存档、无生命周期管理；一个是引用式、轻量、需手动清理。选哪个，看你要不要导出图片、支不支持旧浏览器、有没有频繁切换图的需求。
