FileReader读取本地图片应使用readAsDataURL()并将结果赋给img的src，需在onload回调中获取reader.result，每个文件需新建FileReader实例，避免复用；也可用URL.createObjectURL()提升性能但需手动释放。
FileReader 读取本地图片后怎么显示在页面上
直接用 FileReader 的 readAsDataURL()，读完把结果赋给 src 就行。别用 readAsText() 或手动拼 base64 前缀——它会自动加 data:image/xxx;base64,，多加一遍就变无效 URL。
常见错误现象： 空白、控制台没报错但图不显示、预览一闪而过。
- 确保
onload回调里才取reader.result，reader.readAsDataURL(file)是异步的，不能写在后面直接读 - 文件对象必须来自用户主动触发的 input（比如
），否则浏览器会拒绝读取（安全限制） - 如果选了大图（比如 >5MB），
FileReader不报错但加载慢，
HTML input file 多图上传时 FileReader 怎么逐个处理
别在循环里复用同一个 FileReader 实例。每个文件都要 new 一个新实例，否则回调里的 this.result 会错乱，大概率只显示最后一张。
使用场景：用户一次选了 3 张图，要挨个预览缩略图。
- 用
for (const file of e.target.files)遍历，每次循环const reader = new FileReader() -
reader.onload里生成 - 注意
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)，直接赋给 - 记得在不需要时调用
URL.revokeObjectURL(url)，比如组件卸载、换图前 - 不兼容 IE10 及以下，如果还要支持就得 fallback 到
FileReader
base64 和 blob URL 的核心区别就在这儿：一个是数据内联、可存档、无生命周期管理；一个是引用式、轻量、需手动清理。选哪个，看你要不要导出图片、支不支持旧浏览器、有没有频繁切换图的需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
