React中如何避免<input type="file">重复文件存入state？

当然可以通过对比文件后再写入state来避免重复，下面是几种实用的实现方式：

基础方案：通过文件元信息判断唯一性 #

利用文件的name、size、lastModified三个属性组合判断，这三个值的组合基本能覆盖绝大多数场景（除非两个文件完全重名、大小一致且修改时间完全相同，这种情况极少）。

代码示例 #

import { useState } from 'react';

function FileUploader() {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (e) => {
    // 将FileList转为数组方便处理
    const newFiles = Array.from(e.target.files);

    // 过滤掉已存在于state中的文件
    const uniqueFiles = newFiles.filter(newFile => {
      return !selectedFiles.some(existingFile => 
        existingFile.name === newFile.name &&
        existingFile.size === newFile.size &&
        existingFile.lastModified === newFile.lastModified
      );
    });

    // 只有存在新的唯一文件时才更新state
    if (uniqueFiles.length > 0) {
      setSelectedFiles(prev => [...prev, ...uniqueFiles]);
    }

    // 清空input值，否则重复选择同一文件不会触发change事件
    e.target.value = '';
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <ul>
        {selectedFiles.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default FileUploader;

关键细节 #

• 必须清空e.target.value：因为<input type="file">的change事件仅在文件列表发生变化时触发，如果用户重复选择同一文件，input值未改变则不会触发事件，清空后就能正常触发并过滤。
• 不要单独用name判断：不同文件完全可能重名，组合三个属性才能保证准确性。

进阶方案：通过文件内容哈希判断（绝对唯一） #

如果你的场景要求绝对避免重复（比如两个文件元信息完全一致但内容不同），可以读取文件内容生成哈希值（如SHA-256），通过哈希值判断唯一性。

代码示例 #

import { useState } from 'react';

function FileUploader() {
  const [selectedFiles, setSelectedFiles] = useState([]);

  // 生成文件的SHA-256哈希值
  const getFileHash = async (file) => {
    const arrayBuffer = await file.arrayBuffer();
    const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    // 转为十六进制字符串
    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  };

  const handleFileChange = async (e) => {
    const newFiles = Array.from(e.target.files);
    // 为每个新文件生成哈希值
    const newFilesWithHash = await Promise.all(
      newFiles.map(async file => ({
        ...file,
        hash: await getFileHash(file)
      }))
    );

    // 通过哈希值过滤重复文件
    const uniqueFiles = newFilesWithHash.filter(newFile => {
      return !selectedFiles.some(existingFile => existingFile.hash === newFile.hash);
    });

    if (uniqueFiles.length > 0) {
      setSelectedFiles(prev => [...prev, ...uniqueFiles]);
    }

    e.target.value = '';
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <ul>
        {selectedFiles.map((file, index) => (
          <li key={index}>{file.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default FileUploader;

优缺点 #

• 优点：完全准确，能区分任何内容不同的文件。
• 缺点：读取大文件时会有性能开销，适合对文件唯一性要求极高的场景。

内容的提问来源于stack exchange，提问作者Lisan Li