React中<option>设File值，onChange无法获取实际File对象问题

HTML的<option>标签value属性仅支持字符串类型，直接传入File对象会被自动转换为字符串"[object File]"，这就是你拿不到实际File对象的原因。以下是两种实用的解决方法：

方法一：用文件列表的索引作为option的value #

这是最简单直接的方案，适合文件列表不会动态增删的场景：

渲染select组件 #

<select onChange={handleFeatureImageChange}>
  {fileList.map((file, index) => (
    <option key={index} value={index}>
      {file.name}（序号{index + 1}）
    </option>
  ))}
</select>

处理选择事件 #

const handleFeatureImageChange = (e) => {
  // 把字符串类型的索引转成数字
  const selectedIndex = parseInt(e.target.value, 10);
  // 通过索引从文件列表中获取对应的File对象
  const selectedFile = fileList[selectedIndex];
  // 现在可以正常使用selectedFile了
  console.log(selectedFile);
};

方法二：用文件的唯一标识作为option的value #

如果文件列表可能有增删操作，索引会不稳定，这时可以用文件的name、size、lastModified组合成唯一字符串作为value：

渲染select组件 #

<select onChange={handleFeatureImageChange}>
  {fileList.map((file) => {
    // 生成唯一标识字符串
    const uniqueFileKey = `${file.name}-${file.size}-${file.lastModified}`;
    return (
      <option key={uniqueFileKey} value={uniqueFileKey}>
        {file.name}（序号{fileList.indexOf(file) + 1}）
      </option>
    );
  })}
</select>

处理选择事件 #

const handleFeatureImageChange = (e) => {
  const selectedKey = e.target.value;
  // 通过唯一标识在文件列表中找到对应的File对象
  const selectedFile = fileList.find(file => 
    `${file.name}-${file.size}-${file.lastModified}` === selectedKey
  );
  console.log(selectedFile);
};

额外注意 #

• 确保生成的唯一标识不会重复，避免不同文件出现相同的key；
• 如果是受控组件，可以把选中的索引或唯一标识存在state中，需要使用File对象时再从列表中取出。

内容的提问来源于stack exchange，提问作者Ashutosh Chapagain