用FileReader读取图片后预览显示空白怎么办？

这个问题的关键是需要仔细检查几个可能出问题的地方，包括文件读取、图片加载的生命周期，以及DOM操作的细节。咱们一步步来分析。

首先，你的代码逻辑大体是对的：FileReader 读取文件并生成 Base64 数据，然后赋值给 img.src。但不出来的原因可能有以下几种：

1. 文件本身有问题。比如用户上传的文件虽然扩展名是图片格式，但实际上可能是损坏的或者根本不是图片。
2. Base64 数据没有正确加载到 img 标签中。
3. 图片加载过程中可能存在异步问题，导致 DOM 渲染时数据还没准备好。

下面我给出一个更完整的解决方案，并解释每一步为什么要这么做：

function previewImage(file) {

  // 首先要验证文件是否是图片

  if (!file.type.startsWith('image/')) {

    console.error('上传的文件不是图片类型');

    return;

  }



  const reader = new FileReader();



  // 当文件读取成功时触发

  reader.onload = () => {

    const img = document.createElement('img');



    // 确保图片加载完成后再插入到 DOM 中

    img.onload = () => {

      // 图片加载完成后才插入到 body 中

      document.body.appendChild(img);

    };



    // 给 img.src 赋值 Base64 数据

    img.src = reader.result;



    // 如果图片加载失败，打印错误信息

    img.onerror = (error) => {

      console.error('图片加载失败', error);

    };

  };



  // 如果读取文件失败，也要处理错误

  reader.onerror = () => {

    console.error('文件读取失败');

  };



  // 开始读取文件

  reader.readAsDataURL(file);

}

详细说明

1. 文件类型验证
这里加了一个判断：if (!file.type.startsWith('image/'))。这是为了确保用户上传的是图片文件。如果文件类型不对，直接返回并打印错误信息。这样可以避免非图片文件被错误处理。

2. 图片加载的生命周期
我们在 img.onload 中插入图片到 DOM。这是因为图片加载是一个异步过程，如果直接在 reader.onload 中插入，可能会导致图片还没加载完成就被渲染到页面上，从而出现空白的情况。

3. 错误处理
增加了 img.onerror 和 reader.onerror 的处理逻辑。图片加载失败或文件读取失败都会打印错误信息，方便调试。

4. Base64 数据没问题的情况下
如果你确认 Base64 数据是正确的（可以通过打印 reader.result 检查），那么问题大概率是图片加载的时机不对，或者文件本身有问题。

其他可能的问题

- 如果图片太大，某些浏览器可能会限制 Base64 的长度，导致图片无法正常显示。这种情况下可以尝试用 createObjectURL 替代 Base64，它的性能更好，适合大文件。

function previewImageWithObjectURL(file) {

  if (!file.type.startsWith('image/')) {

    console.error('上传的文件不是图片类型');

    return;

  }



  const img = document.createElement('img');

  const objectURL = URL.createObjectURL(file);



  img.onload = () => {

    // 释放 Object URL，避免内存泄漏

    URL.revokeObjectURL(objectURL);

  };



  img.onerror = (error) => {

    console.error('图片加载失败', error);

  };



  img.src = objectURL;

  document.body.appendChild(img);

}

用 URL.createObjectURL 的方式可以直接生成一个临时 URL，不需要经过 Base64 转换，效率更高，特别适合大文件。

总结一下：先确认文件类型，再确保图片加载完成后再插入 DOM，最后加上错误处理逻辑。如果问题依然存在，可以试试 createObjectURL 的方式。

检查一下 file 对象是不是真的拿到了图片文件，有时候 input 的 files 是空的。你那个代码逻辑没问题，但得确保 file 是有效文件。

function previewImage(file) {

  if (!file || !file.type.startsWith('image/')) return;



  const reader = new FileReader();

  reader.onload = () => {

    const img = document.createElement('img');

    img.src = reader.result;

    document.body.appendChild(img);

  };

  reader.readAsDataURL(file);

}

另外确保你是通过 input:file 正确选中了图片，别传了个 null 或 blob 错误类型进去。