React文件上传组件问题：删除后文件名未更新且无法重传同文件

问题原因 #

1. 文件名未同步：删除操作后未更新存储文件名的状态变量，导致UI仍显示旧文件名。
2. 无法重传同一文件：浏览器文件输入框的value未重置，选中同一文件时因值未变化，不会触发onChange事件。

修复步骤 #

1. 新增状态与Ref管理 #

在组件内添加状态变量管理文件名，以及Ref用于操作文件输入框：

import { useState, useRef } from 'react';

// 组件内部状态与Ref
const [fileName, setFileName] = useState('');
const imgFileInputRef = useRef<HTMLInputElement>(null);

2. 优化上传函数，同步文件名 #

上传成功后将选中文件名存入状态，更新UI显示：

const uploadFile = (e: any) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const formData = new FormData();
  formData.append('file', selectedFile); // 补充文件到FormData的逻辑

  PostImgFile(formData)
    .then(() => {
      setFileName(selectedFile.name); // 同步更新文件名状态
      // 这里可以更新imageDetails的imgId，用于后续删除操作
    })
    .catch(err => console.error('上传失败:', err));
}

3. 修改删除函数，重置状态与输入框 #

删除接口调用成功后，清空文件名状态并重置文件输入框，允许重新选择同一文件：

const deleteFile = () => { 
  hideConfirmModal('confirmDeletion');
  if (!imageDetails?.imgId) return;

  DeleteImgFile()
    .then(() => {
      setFileName(''); // 清空文件名，UI自动更新
      // 重置文件输入框的value，触发后续的onChange事件
      imgFileInputRef.current?.value = '';
      // 同时清空imageDetails的imgId，避免重复删除
      // 示例：setImageDetails(prev => ({ ...prev, imgId: undefined }))
    })
    .catch(err => console.error('删除失败:', err));
}

4. 调整组件代码，绑定Ref与显示文件名 #

给文件输入框绑定Ref，添加文件名显示逻辑，并调整删除按钮的隐藏条件：

<!-- 文件输入框绑定ref -->
<input 
  type="file" 
  id="imgFile" 
  style={{ display: 'none' }} 
  onChange={uploadFile} 
  ref={imgFileInputRef}
/>

<!-- 显示当前上传的文件名 -->
{fileName && <span className="file-name">{fileName}</span>}

<!-- 删除按钮，根据fileName是否存在控制显示 -->
<input 
  type="button" 
  value="删除文件"
  onClick={() => confirmModal('confirmDelete')}
  hidden={!fileName} 
/>

核心要点 #

• 重置文件输入框value为空是解决“无法重传同一文件”的关键，强制浏览器识别文件选择操作的变化。
• 所有异步操作（上传/删除）必须在成功回调中更新状态，确保UI与后端数据保持一致。

内容的提问来源于stack exchange，提问作者Parth Kher