React多图上传异常：选多张仅传一张，另一张显示undefined

问题根源 #

你的代码存在几个关键问题导致多图上传异常：

• 文件输入框未开启multiple属性，默认只能选择单个文件
• 绑定了onClick事件而非onChange：点击输入框时还未选择文件，此时e.target.files[0]是undefined，只有选择文件完成后触发的onChange才能拿到正确的文件对象
• 状态更新未使用函数式写法，可能因闭包导致状态更新不及时
• 仅取了e.target.files[0]，即使能选多个文件也只会添加第一个

修正后的代码 #

import { useState } from 'react';

const YourComponent = () => {
  const [labImages, setLabImages] = useState([]);

  const handleLabImagesUpload = (e) => {
    // 使用函数式更新，确保拿到最新的状态
    // 将FileList转为数组，一次性添加所有选中的文件
    setLabImages(prevImages => [...prevImages, ...Array.from(e.target.files)]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(labImages);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label className="text-base xs:text-xl w-[180px] xs:w-[210px] text-white border-[1px] font-bold border-black px-4 py-[2px] rounded">
        <input
          type="file"
          className="cursor-pointer"
          multiple // 开启多文件选择
          onChange={handleLabImagesUpload} // 替换为onChange事件
        />
        Upload Lab Images
      </label>

      <button
        className="bg-secondary text-white font-bold text-xl px-8 rounded py-1 lg:px-12"
        type="submit" // 加上type="submit"，配合表单语义
      >
        Submit
      </button>
    </form>
  );
};

export default YourComponent;

关键修改说明 #

• 添加multiple到file input：允许用户一次性选择多个文件
• 替换onClick为onChange：只有当用户选择文件完成后才触发处理逻辑，此时能正确获取到选中的文件列表
• 函数式更新状态：setLabImages(prevImages => [...prevImages, ...Array.from(e.target.files)])，确保每次更新都基于最新的状态，同时把所有选中的文件（而非仅第一个）添加到数组中
• 调整按钮提交逻辑：配合表单的onSubmit事件，更符合标准表单提交的语义

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