React文件上传组件删除文件后无法重新上传问题排查

问题根源 #

删除已上传文件后无法再次上传，本质是HTML文件输入框（file input）的value未被重置。当用户选择过文件后，input的value会保留文件的伪路径，若不重置该值：

• 再次选择同一文件时，由于value未变化，不会触发onChange事件
• 即使选择不同文件，部分浏览器也可能因内部状态未更新导致事件不触发
  而你的删除逻辑仅将frontSideFile/backSideFile设为null，未同步重置对应input的状态，最终表现为上传按钮（label触发input）失效。

解决方案 #

在删除文件时，同步重置对应file input的value属性。推荐使用React的useRef来获取input元素，避免直接操作DOM，更符合React的状态管理逻辑。

修改步骤 #

1. 添加Ref引用：为两个文件输入框创建ref，用于获取DOM元素
2. 更新删除逻辑：在删除文件时，通过ref重置input的value
3. 调整删除按钮调用：传入对应的ref参数

修改后的完整代码 #

1. 状态与Ref定义

import { useState, useRef } from 'react';

// 保留原有状态定义
const [frontSideFile, setFrontSideFile] = useState<File | null>(null);
const [backSideFile, setBackSideFile] = useState<File | null>(null);
const [frontSideUploadStatus, setFrontSideUploadStatus] = useState<string>("");
const [backSideUploadStatus, setBackSideUploadStatus] = useState<string>("");

// 添加ref引用
const frontSideInputRef = useRef<HTMLInputElement>(null);
const backSideInputRef = useRef<HTMLInputElement>(null);

2. 更新删除处理函数

const handleDelete = (
  setFile: React.Dispatch<React.SetStateAction<File | null>>,
  inputRef: React.RefObject<HTMLInputElement>
) => {
  setFile(null);
  // 重置对应的file input
  if (inputRef.current) {
    inputRef.current.value = "";
  }
};

3. 调整渲染代码中的Input与删除按钮

// 正面文件上传区域
<div>
  <label htmlFor="frontSideFileInput">
    Upload front side
  </label>
  <input
    type="file"
    id="frontSideFileInput"
    accept=".jpg, .jpeg, .png, .pdf"
    onChange={(e) => handleFrontSideUpload(e)}
    style={{ display: "none" }}
    ref={frontSideInputRef} {/* 绑定ref */}
  />
  {frontSideFile && (
    <div>
      <p>Selected: {frontSideFile.name}</p>
      <button
        onClick={() => handleDelete(setFrontSideFile, frontSideInputRef)} {/* 传入ref */}
        className=""
      >
        <TbTrash className="text-red-400" />
      </button>
    </div>
  )}
  {frontSideUploadStatus && (
    <p className="text-red-500">{frontSideUploadStatus}</p>
  )}
</div>

// 背面文件上传区域
<div>
  <label htmlFor="backSideFileInput">
    Upload back side
  </label>
  <input
    type="file"
    id="backSideFileInput"
    accept=".jpg, .jpeg, .png, .pdf"
    onChange={(e) => handleBackSideUpload(e)}
    style={{ display: "none" }}
    ref={backSideInputRef} {/* 绑定ref */}
  />
  {backSideFile && (
    <div>
      <p>Selected: {backSideFile.name}</p>
      <button
        onClick={() => handleDelete(setBackSideFile, backSideInputRef)} {/* 传入ref */}
      >
        <TbTrash />
      </button>
    </div>
  )}
  {backSideUploadStatus && (
    <p>{backSideUploadStatus}</p>
  )}
</div>

补充说明 #

你在文件大小校验逻辑中已经正确重置了input的value，这是很好的实践。删除时的重置操作和此逻辑保持一致，确保无论哪种场景，input的状态都能正确同步，避免出现上传失效的问题。

内容的提问来源于stack exchange，提问作者Dave Odipo