为何使用FileReader转换图片为Base64而非直接用btoa()？

核心原因在于两者处理的对象和场景完全不同，具体区别如下：

• 处理对象的本质差异：
  btoa() 只能直接处理UTF-16编码的字符串，但图片文件是二进制数据（Blob/File对象）。如果硬要用btoa()，你得先把二进制文件转成字符串，但这个转换过程很容易出现编码错误——比如二进制里包含无法被UTF-16正确解析的字节，会导致btoa()抛出异常，或者生成的Base64完全无法还原成原始图片。
  而FileReader是浏览器专门为处理二进制文件（File/Blob）设计的API，readAsDataURL方法会自动正确读取二进制内容并编码成标准的Base64字符串，完全不用你操心编码兼容问题。

• 输出格式的实用性：
  FileReader.readAsDataURL() 生成的结果是完整的Data URI（比如data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...），可以直接用于<img>标签的src属性，或者作为请求体发送给API（很多API也支持直接接收Data URI格式的Base64）。
  而btoa()只会生成纯Base64编码的字符串，你需要手动拼接Data URI的前缀，还要确保二进制转字符串的过程没有出错，额外增加了工作量和出错概率。

• 异步处理的优势：
  处理大图片时，FileReader是异步执行的，不会阻塞浏览器主线程，页面不会出现卡顿；如果用同步方式把二进制转成字符串再调用btoa()，大文件会让页面卡住，影响用户体验。

简单说：btoa()适合处理字符串的Base64编码，而FileReader才是浏览器原生用来处理二进制文件转Base64的正确姿势，虽然代码看起来多几行，但能避免很多潜在的编码和性能问题。

内容的提问来源于stack exchange，提问作者Elise J