html本身不提供base64编解码能力，必须依赖javascript的atob()/btoa()或filereader；btoa()仅支持ascii字符串，遇中文、emoji等会报invalidcharactererror，正确做法是先用textencoder转uint8array再处理；嵌入图片时需严格匹配data:mime-type;base64,格式，确保mime类型准确、无换行空格。
HTML 本身不提供 Base64 编解码能力，必须靠 JavaScript 的 atob() 和 btoa() 函数，或借助 FileReader 处理文件；直接写在 HTML 标签里（比如 <img src="data:image/png;base64,...">）只是使用，不是“做编解码”。
为什么 btoa() 和 atob() 会报错 “InvalidCharacterError”
这两个函数只接受纯 ASCII 字符（U+0000–U+007F），遇到中文、emoji、换行符、BOM 等就会崩。
- 常见错误现象：
atob("5L2g5aW9")直接抛错，因为这是 UTF-8 编码的 Base64，但atob()想解的是 ASCII 字符串 - 正确做法：先用
TextEncoder把字符串转成 Uint8Array，再用btoa()前需先用String.fromCharCode(...)转回 ASCII 字符串 - 更稳妥的替代方案：用
Buffer.from(str, 'utf8').toString('base64')（Node.js）；浏览器端推荐用Uint8Array+btoa(String.fromCharCode(...))组合 - 注意：
btoa()输入长度必须是 3 的倍数，否则自动补空格导致结果错乱——实际中建议始终用二进制路径，别依赖字符串直传
HTML 中嵌入 Base64 图片时，为什么图片不显示
多数情况不是编码问题，而是 MIME 类型写错或数据损坏。
- 必须严格匹配格式：
data:<mime-type>;base64,@#@#@#@#@#@#@#@#@#@0）里点“还原为文件”，能下载出图就说明编码没问题</mime-type>
用 FileReader 读取文件转 Base64，怎么避免内存爆炸
大文件（>10MB）用 readAsDataURL() 会生成超长 data URL，字符串拷贝极易卡死页面。
- 关键点：
readAsDataURL()返回的是完整 data URL（含data:...;base64,前缀），不是纯 Base64 字符串，记得用.split(',')[1]截取 - 性能陷阱：不要对多个大文件连续调用
readAsDataURL()，应加节流或改用readAsArrayBuffer()+ Web Worker 分片处理 - 兼容性提醒：
FileReader在 IE10+ 支持，但 IE 不支持TextEncoder，需 fallback 到unescape(encodeURIComponent())方案（仅限小文本） - 真实建议：前端上传前，优先考虑压缩或分片上传，而不是硬塞整个文件的 Base64
真正难的从来不是“怎么调函数”，而是判断该不该用 Base64——图片小于 4KB 才适合内联，JSON 参数里塞 Base64 Token 要确认后端是否真需要，而文件上传几乎从不需要前端转 Base64。工具只是手段，选错场景，再对的代码也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
