前端图片预览无需上传服务器，可通过FileReader读取文件为Base64字符串（data:image/xxx;base64,...）赋值给img.src，或用URL.createObjectURL(file)创建临时blob URL实现更轻量预览，后者需及时调用revokeObjectURL释放内存。
前端图片预览不需要上传服务器，关键在于把用户选中的文件（File对象）转成可显示的 URL 或 Base64 字符串。Base64 是一种将二进制数据编码为 ASCII 字符串的方案，浏览器能直接用 data:image/xxx;base64,... 形式渲染它。
用 FileReader 读取文件为 Base64
这是最常用、兼容性好、无需额外依赖的方法。核心是监听 load 事件，在回调中获取 e.target.result —— 它就是带 data: 前缀的 Base64 字符串。
- 绑定
input[type="file"]的change事件，拿到e.target.files[0] - 创建
new FileReader()，调用readAsDataURL(file) - 在
reader.onload = e => { img.src = e.target.result }中赋值给<img>的src
从 Base64 字符串还原为 Blob（用于后续上传或下载）
Base64 字符串虽便于预览，但体积比原始二进制大 ~33%，不适合直接上传。如需上传，得先解码回 Blob：
- 提取 Base64 数据部分：去掉
data:image/png;base64,前缀（可用split(',')） - 用
atob()解码字符串 → 得到原始二进制字符串 - 逐字符转为
Uint8Array，再用new Blob([uint8Arr], {type: 'image/png'})构造 Blob
注意：atob 对非 ASCII 字符会报错，若 Base64 来自非标准来源（如含中文路径），需确保编码一致；通常 FileReader 生成的 Base64 是安全的。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
不经过 Base64：用 URL.createObjectURL 直接创建临时地址
更轻量、无编码开销，适合纯预览场景：
-
const url = URL.createObjectURL(file)返回一个形如blob:http://localhost/xxx的临时 URL - 直接赋给
img.src = url即可显示 - 记得在不需要时调用
URL.revokeObjectURL(url)释放内存（尤其在频繁切换图片时）
这个 URL 只在当前文档生命周期内有效，刷新即失效，不能跨页面或存为字符串传递。
字符串与二进制转换的边界要清楚
Base64 是字符串，不是二进制；Blob / ArrayBuffer / Uint8Array 才是真正的二进制载体。常见误区：
- 误以为
atob(base64Str)返回的是Uint8Array—— 实际返回的是二进制字符串（每个字符对应一个字节） - 用
TextEncoder处理 Base64 解码结果会出错，因为atob输出已含原始字节，应直接映射为Uint8Array - Base64 字符串长度一定是 4 的倍数，不足时用
=补齐；解码前最好先校验或补全
真正需要操作像素或压缩时，还得靠 Canvas + ctx.getImageData 或 createImageBitmap 进入二进制层面。
