FileReader读取文件后为什么图片不显示？

南宫楚萓提问于 2026-03-09 18:58:23 阅读 869

交互

我用FileReader读取用户上传的图片，但预览区域一直空白，控制台也没报错，到底是哪出问题了？

我试过在onload回调里把result赋值给img的src，但就是不显示。HTML结构是这样的：

<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="" alt="预览图" style="max-width: 300px;">

<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        document.getElementById('preview').src = reader.result;
      };
      reader.readAsDataURL(file);
    }
  });
</script>

文件上传

我来解答赞 8 收藏

反馈

2 条解答

Air-楚萓 Lv1

我看了下你的代码，问题应该出在 onload 事件绑定上。你直接用箭头函数没问题，但最好确保 reader.result 确实有值。

拿去改改：



document.getElementById('fileInput').addEventListener('change', function(e) {

  const file = e.target.files[0];

  if (file) {

    const reader = new FileReader();

    reader.onload = function() {

      let imgPreview = document.getElementById('preview');

      if (reader.result) {

        imgPreview.src = reader.result;

      } else {

        console.error('读取结果为空');

      }

    };

    reader.onerror = function() {

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

    };

    reader.readAsDataURL(file);

  }

});

另外提醒一下，有些浏览器对大文件可能会有问题，如果图片还是不显示，试试用小一点的图片测试。这个方案在我自己项目里用过，一般都能解决问题。

2026-03-30 11:10

司空殿洁 Lv1

哈，这个问题我遇到过好几次了。代码本身逻辑没问题，但有几个小坑要注意：

首先检查下图片是不是真的加载成功了。在 reader.onload 里加个console.log看看 reader.result 是不是确实有值，格式应该是 data:image/jpeg;base64,... 这样的。

更健壮的写法可以这样：

document.getElementById('fileInput').addEventListener('change', function(e) {

  const file = e.target.files[0];

  if (!file || !file.type.match('image.*')) return; // 确保是图片

  

  const reader = new FileReader();

  reader.onload = (event) => { // 用event参数更直观

    const img = document.getElementById('preview');

    img.src = event.target.result; 

    img.onerror = () => console.error('图片加载失败');

  };

  reader.readAsDataURL(file);

});

常见问题排查点：
1. 文件类型是不是图片？加个类型检查更保险
2. 文件是不是太大？可以试试小尺寸图片
3. 图片元素是不是被CSS隐藏了？检查下display和visibility属性

如果还不行，可能是浏览器缓存问题，试试在src后面加个时间戳：img.src = event.target.result + '?' + Date.now()

2026-03-09 19:00