React中如何预览上传前图片？解决多图仅显示最后一张问题

问题核心是你用单个变量preview存储预览URL，每次上传新图片都会覆盖之前的值，导致所有img标签都指向最后一张图片的URL。要展示所有五张图片，需要把预览状态改成对象/数组，分别存储每个输入字段对应的预览链接。

修改后的代码实现 #

1. 调整状态初始化与文件选择处理函数

// 用对象存储每个输入字段的预览URL，键对应输入框的name属性
const [previews, setPreviews] = useState({});

function fileSelectedHandler(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  const previewUrl = URL.createObjectURL(file);
  const inputName = e.target.name;

  // 更新预览对象，保留已有预览，新增当前输入的预览
  setPreviews(prev => ({
    ...prev,
    [inputName]: previewUrl
  }));

  // 同时更新memberData，逻辑不变
  setMemberData(prev => ({
    ...prev,
    [inputName]: {
      data: file,
      contentType: file.type,
    },
  }));
}

2. 修改预览区域的渲染

假设你的五个图片输入框name属性分别为image1、image2、image3、image4、image5，调整img标签的src指向对应预览：

<CContainer className="form-image-cont " >
  <CFormText>Images</CFormText>
  <img src={previews.image1} className="image-input" alt="预览1"/>
  <img src={previews.image2} className="image-input" alt="预览2"/>
  <img src={previews.image3} className="image-input" alt="预览3"/>
  <img src={previews.image4} className="image-input" alt="预览4"/>
  <img src={previews.image5} className="image-input" alt="预览5"/>
</CContainer>

补充说明 #

• 确保每个图片输入框都设置了唯一的name属性（比如name="image1"），这样才能和previews对象的键对应起来。
• 如果后续需要动态增减图片输入框，可以把预览改成数组，用map函数循环渲染img标签，更灵活。

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