JavaScript用FileReader转图片为Base64后损坏无法作为img src如何解决

我正尝试通过JavaScript将本地文件中的图片转换为Base64格式。
当我在Local File标题下方的文件输入框（id为#form-base64-converter-encode-image-file）中选择一张图片后，在浏览器控制台运行如下代码：

function getBase64(file) {
   var reader = new window.FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
    alert(reader.result);
   };
   reader.onerror = function (error) {
     alert('Error: ', error);
   };
}

var file = window.document.querySelector('#form-base64-converter-encode-image-file').files[0];
getBase64(file);

运行后脚本返回了一段预期为图片Base64编码的长字符串，但我将该字符串赋值给<img>标签的src属性时，图片无法正常显示，看起来字符串已损坏或Base64编码格式不正确。请问如何才能得到可正常赋值给<img>标签src属性的正确Base64字符串？

你遇到的问题根源是alert控件的输出长度限制：浏览器的alert弹窗会自动截断过长的文本内容，你手动复制到的Base64字符串本身就是不完整的，自然无法正常渲染图片。FileReader返回的reader.result本身就是符合规范的Data URL格式，不需要额外修改即可直接赋值给img.src使用。

你可以用以下两种方式获取完整的Base64字符串：

• 直接在控制台打印输出，而不是用alert弹窗：把alert(reader.result)改成console.log(reader.result)，运行后在控制台右键选择「复制字符串」即可拿到完整内容
• 直接在代码里完成赋值操作，不需要手动复制：你可以在onload回调里直接把结果赋值给页面上的img元素，示例如下：

function getBase64(file) {
   const reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
    // 直接赋值给img元素，不需要手动复制
    document.querySelector('img').src = reader.result;
    // 或者打印到控制台复制完整内容
    console.log('完整Base64字符串：', reader.result);
   };
   reader.onerror = function (error) {
     console.error('读取失败：', error);
   };
}

const file = document.querySelector('#form-base64-converter-encode-image-file').files[0];
if (file) {
  getBase64(file);
}

补充注意点：

• 要确保文件读取完成后再使用结果，FileReader是异步API，不能在调用getBase64之后立刻读取结果，必须在onload回调里处理
• 如果确实需要提取纯Base64编码内容（去掉前面的data:image/xxx;base64,前缀），可以用reader.result.split(',')[1]获取，赋值给src的时候再拼接对应前缀即可。

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