filereader.readasdataurl()是前端图片预览最常用且可控的方式，它在本地异步将文件转为data:image/xxx;base64,...格式的url，可直接用于img标签src，无需网络请求。
用 FileReader.readAsDataURL() 在浏览器里实时转图
前端最常用、也最可控的方式，就是靠原生 FileReader.readAsDataURL()。它不依赖网络、不上传图片、所有操作都在用户本地完成，适合做上传预览、表单内嵌、调试验证等场景。
常见错误现象包括：reader.onload 没触发（忘记监听）、this.files[0] 为空（没选文件）、file.type 判断太死（比如只认 image/jpeg 却漏了 image/jpg）。
- 务必在
input[type="file"]上绑定change事件，不是click - 检查
file.type建议用正则/^image\//.test(file.type)，比字符串全匹配更稳 -
reader.result返回的是完整的 data URL，形如data:image/png;base64,iVBORw0KGgo=，可直接赋给<img src>或存入后端字段 - 大图（比如 >5MB）可能卡顿或触发内存警告，建议加大小限制提示
复制粘贴截图也能转 Base64？试试 Ctrl+V
不少现代工具（比如 daima.life/img2base64）支持直接 Ctrl+V 粘贴截图——这背后其实是监听了 paste 事件，从 event.clipboardData.items 里提取 Blob，再走一遍 FileReader 流程。
这个能力对写文档、做演示、临时调试特别快，但要注意：Mac 截图（Cmd+Shift+4）进剪贴板的是位图，Windows 截图（Win+Shift+S）默认也是，但某些远程桌面或安全软件会拦截剪贴板数据，导致 items.length === 0。
- 粘贴前先确认剪贴板里真有图片：可以先粘到记事本看是否为空
- 别依赖
clipboardData.files（已废弃），要用clipboardData.items遍历type.startsWith("image/") - 粘贴的图没有文件名，
file.name会是空字符串，如果业务需要命名，得手动补一个（比如"screenshot.png"）
Base64 字符串能不能直接塞进 HTML 或 CSS？
能，但必须带完整 data URI 前缀，格式是 data:<mime-type>;base64,<payload></payload></mime-type>。漏掉 data: 或写错 MIME 类型（比如把 image/jpeg 写成 image/jpg）会导致图片不显示，控制台一般不报错，只静默失败。
常见 MIME 类型对应关系：image/png、image/jpeg、image/gif、image/webp。注意 image/jpg 不是标准类型，部分老浏览器可能不认，优先用 image/jpeg。
- HTML 中：
<img src="data:image/jpeg;base64,/9j/4AAQ..."> - CSS 中：
background-image: url("data:image/png;base64,iVBORw0KGgo="); - Base64 payload 本身不能换行、不能含空格或制表符，否则解析失败
- 编码后体积膨胀约 33%，图标类小图（10KB）反而拖慢 HTML 加载
服务端生成 Base64 容易踩什么坑？
如果用 C#、Python 或 Node.js 做服务端转换，核心是读取二进制文件再调 base64.b64encode()（Python）、Convert.ToBase64String()（C#）这类函数，但关键在于 MIME 类型怎么定。
容易忽略的是：仅靠文件扩展名推断类型不可靠（比如 .jpg 文件实际是 PNG），而服务端又不像浏览器有 file.type 可用。硬编码 image/jpeg 会导致 WebP 图片被当成 JPEG 解析失败。
- 推荐用文件头（magic bytes）识别真实类型，比如 Python 用
python-magic，Node.js 用file-type包 - 输出时别忘了拼上
data:<mime>;base64,</mime>前缀，否则前端无法直接当 src 用 - 如果 Base64 是用于邮件模板或小程序，确认目标平台是否支持 data URI —— 微信小程序不支持
<img src="data:...">，必须传 CDN 地址
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
