浏览器中不能直接用btoa()编码图片二进制数据，需用filereader.readasdataurl()转为base64字符串并截取data:前缀后部分；node.js中用buffer.tostring('base64')；注意mime类型匹配、长度限制及避免重复编码。
浏览器里用 btoa() 编码字符串，但图片文件不行
直接调用 btoa() 只能处理纯 ASCII 字符串，传入二进制数据（比如图片的 ArrayBuffer 或 Blob）会报错：Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
真正要编码图片，得先把它转成 UTF-8 兼容的字符串——最稳的方式是用 FileReader 读取为 data URL，它内部自动完成 Base64 编码：
const reader = new FileReader();
reader.onload = () => {
const base64String = reader.result.split(',')[1]; // 去掉 data:image/png;base64, 前缀
console.log(base64String);
};
reader.readAsDataURL(file); // file 是 input[type="file"] 选中的 File 对象
- 别用
readAsText()，它默认按 UTF-8 解码二进制，会破坏原始字节 -
readAsDataURL()是浏览器原生支持的，不用额外库，兼容性到 IE10+ - 如果只需要 Base64 字符串（不含前缀），记得用
.split(',')截取第二部分
后端或 Node.js 环境用 Buffer.from().toString('base64')
Node.js 里没有 btoa，但 Buffer 是首选方案。无论图片是本地文件还是 HTTP 请求来的 Buffer，都可直接转：
const fs = require('fs');
const imgBuffer = fs.readFileSync('./avatar.jpg');
const base64String = imgBuffer.toString('base64');
- 确保传入的是
Buffer实例；如果是Uint8Array，先用Buffer.from(uint8array) - 不要用
fs.readFile回调里拼接字符串再转 Base64——容易乱码，必须基于原始二进制 - 生成的字符串可直接嵌入 HTML：
<img src="data:image/jpeg;base64,<code>%24%7Bbase64String%7D">
HTML 中直接显示 Base64 图片，注意 MIME 类型和长度限制
Base64 图片写进 src 属性时，MIME 类型必须和实际文件一致，否则可能不显示或触发 CORS 问题：
- JPEG →
data:image/jpeg;base64,<code>xxx</code>
- PNG →
data:image/png;base64,<code>xxx - SVG →
data:image/svg+xml;base64,<code>xxx
另外，大图（比如 >2MB）转 Base64 后体积增大约 33%，且所有主流浏览器对 data: URL 都有长度限制（Chrome 约 2MB，Safari 更严）。超长会静默失败——图片空白，控制台也不报错。
避免重复编码：Base64 字符串不能二次 btoa()
已经 Base64 编码过的字符串（如从后端接口拿到的 data:image/png;base64,...）不能再用 btoa() 处理，否则结果错乱、解码失败。常见误操作：
- 前端收到 Base64 字符串，又调一次
btoa(res.base64)—— 错 - 把带
data:...前缀的整个字符串传给btoa()—— 错（前缀含冒号、斜杠等非 Latin1 字符） - 正确做法：提取纯 Base64 段（用
split(',').pop()），直接使用或存入 DOM
真正难的不是怎么编，而是分清「原始二进制」「UTF-8 字符串」「Base64 字符串」三层边界——跨层混用，八成出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
