ReactJS与FileReader API多图上传预览异常：仅显示最后一张图片求助

嘿，我太懂你这种郁闷了！之前做图片上传预览的时候，也踩过这个只显示最后一张的坑，折腾了好半天才搞清楚问题出在哪～

问题根源拆解 #

你碰到的情况，大概率是两个原因叠加导致的：

1. 循环变量作用域问题：如果用var声明循环索引，它是函数级作用域，所有图片加载的回调函数都会引用同一个变量，等异步的onload触发时，循环已经结束，索引值变成了最后一个文件的位置，所以只会处理最后一张图。
2. 容器被重复清空：如果每次添加预览图前都用innerHTML = ''清空容器，那之前的图片肯定会被覆盖，最后只剩最后一张。

直接可用的解决方案 #

下面给你三种靠谱的写法，选一种适合你的就行：

写法1：用let声明循环变量（最简洁）

let是块级作用域，每次循环都会创建独立的变量，回调能正确捕获当前循环的文件：

const input = document.getElementById('image-input');
const previewContainer = document.getElementById('preview-container');

input.addEventListener('change', function(e) {
  const files = e.target.files;
  // 清空之前的预览（如果需要保留历史预览，就删掉这行）
  previewContainer.innerHTML = '';
  
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    // 先检查是不是图片文件
    if (!file.type.startsWith('image/')) {
      alert(`${file.name} 不是图片文件，请重新选择！`);
      continue;
    }
    
    const reader = new FileReader();
    reader.onload = function() {
      const img = document.createElement('img');
      img.src = reader.result;
      // 给预览图加个基础样式，避免撑爆页面
      img.style.maxWidth = '200px';
      img.style.margin = '8px';
      img.style.borderRadius = '4px';
      previewContainer.appendChild(img);
    }
    
    reader.readAsDataURL(file);
  }
});

写法2：用forEach遍历文件（更直观）

forEach的每个回调函数都有独立作用域，天然避免闭包问题：

const input = document.getElementById('image-input');
const previewContainer = document.getElementById('preview-container');

input.addEventListener('change', function(e) {
  // 把FileList转成数组，方便用forEach
  const files = Array.from(e.target.files);
  previewContainer.innerHTML = '';
  
  files.forEach(file => {
    if (!file.type.startsWith('image/')) {
      alert(`${file.name} 不是图片文件，请重新选择！`);
      return;
    }
    
    const reader = new FileReader();
    reader.onload = function() {
      const img = document.createElement('img');
      img.src = reader.result;
      img.style.maxWidth = '200px';
      img.style.margin = '8px';
      img.style.borderRadius = '4px';
      previewContainer.appendChild(img);
    }
    
    reader.readAsDataURL(file);
  });
});

写法3：用闭包捕获变量（兼容老环境）

如果你的项目需要兼容不支持let的老浏览器，可以用立即执行函数（IIFE）创建闭包，把当前文件作为参数传递进去：

const input = document.getElementById('image-input');
const previewContainer = document.getElementById('preview-container');

input.addEventListener('change', function(e) {
  const files = e.target.files;
  previewContainer.innerHTML = '';
  
  for (var i = 0; i < files.length; i++) {
    // 立即执行函数，捕获当前循环的文件
    (function(currentFile) {
      if (!currentFile.type.startsWith('image/')) {
        alert(`${currentFile.name} 不是图片文件，请重新选择！`);
        return;
      }
      
      const reader = new FileReader();
      reader.onload = function() {
        const img = document.createElement('img');
        img.src = reader.result;
        img.style.maxWidth = '200px';
        img.style.margin = '8px';
        img.style.borderRadius = '4px';
        previewContainer.appendChild(img);
      }
      
      reader.readAsDataURL(currentFile);
    })(files[i]);
  }
});

额外小提示 #

• 如果需要保留历史预览，不要用innerHTML = ''清空容器，直接追加新图片就行。
• FileReader是异步的，如果需要严格保证图片显示顺序和上传顺序一致，可以用Promise.all来批量处理，不过一般场景下上面的写法足够用了。

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