filereader.readasdataurl()是浏览器中唯一可靠读取并base64编码文件的方法，它自动处理二进制转码、拼接data url，兼容ie10+；需监听input[type="file"]的change事件，在onload后取reader.result，并用split(',')[1]安全截取纯base64字符串。
FileReader.readAsDataURL() 是唯一靠谱的浏览器方案
浏览器里没法用 btoa() 直接转文件——它只认字符串，而图片/PDF 是二进制数据，硬传会报 DOMException: The string to be encoded contains characters outside of the Latin1 range。真正能读取并编码文件的，只有 FileReader 的 readAsDataURL() 方法。
它内部自动完成二进制 → Base64 编码 → 拼装成 data:image/png;base64,... 格式，整个过程不发请求、不依赖网络、兼容 IE10+。
- 必须监听
input[type="file"]的change事件，不是click -
reader.result只在reader.onload触发后才有效，不能在readAsDataURL()调用后立刻读 - 记得检查
e.target.files[0]是否存在，否则files[0]会是undefined，后续直接崩
怎么拿到纯 Base64 字符串（不含 data: 前缀）
很多人卡在这步：reader.result 返回的是完整 Data URL，比如 data:image/jpeg;base64,/9j/4AAQSkZJRg...，但后端或某些场景只要逗号后面那一长串。
最稳的截取方式是：reader.result.split(',')[1]。别用正则匹配 MIME 类型再切——类型可能带参数（如 image/jpeg; charset=utf-8），也别用 indexOf 找第一个逗号，万一文件名里有逗号就翻车。
- 如果
reader.result为空或没逗号，说明读取失败，优先查reader.onerror回调 - 某些老旧安卓 WebView 对
split支持弱，可加一层防御：const parts = reader.result.split(','); const base64 = parts.length > 1 ? parts[1] : '';
常见踩坑点：MIME 类型、空格、换行、大小限制
Base64 字符串对格式极其敏感。从命令行工具、在线转换站复制过来的内容，常含不可见的换行符或空格，粘贴到 src 或后端字段里会导致图片空白、解码失败。
- 写进
<img src>时，MIME 必须和实际文件一致：image/jpeg≠image/jpg，image/x-png浏览器直接拒载 - 大图慎用：5MB 原图转 Base64 后约 6.7MB，HTML 体积暴涨，首屏解析慢，且无法被浏览器缓存
- 服务端接收时，别在字段里额外 trim() 或 replace(/\s/g, '')——Base64 允许末尾有
=填充符，删掉就解码失败
Node.js 环境下别混用 FileReader
服务端没有 FileReader，也压根不该用。Node.js 里处理本地文件，直接用 fs.readFileSync() + Buffer.toString('base64') 最干净：
const fs = require('fs');
const imgBuffer = fs.readFileSync('./avatar.png');
const base64String = imgBuffer.toString('base64');
注意两点：一是必须传 Buffer 实例，如果读出来是 Uint8Array，得先 Buffer.from(uint8array)；二是别用 fs.readFile 异步回调拼字符串再转——中间经过 UTF-8 解码再转回，字节早乱了。
真正容易被忽略的是：前端用 readAsDataURL() 得到的 Base64 字符串，和服务端 Buffer.toString('base64') 出来的结果，**内容完全一致，但 MIME 前缀由前端决定，后端不参与**。如果你发现前后端 Base64 不一致，八成是前端没校验 file.type，把 image/jpg 当成了 image/jpeg 写进前缀，而服务端按真实文件头判断 MIME，两边对不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
