React文件输入：解决图片移除后无法重新上传相同文件的问题

import React, { useState, useRef } from 'react';
import { Button } from 'react-bootstrap'; // 假设使用了 react-bootstrap

const ImageUploader: React.FC = () => {
  // image 状态存储图片预览URL，初始值为 "noImage" 表示未上传
  const [image, setImage] = useState<string>("noImage");
  // 使用 useRef 获取文件输入框的 DOM 引用
  const inputRef = useRef<HTMLInputElement>(null);

  /**
   * 处理文件选择事件
   * @param event 文件输入框的 change 事件
   */
  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      // 创建一个 Blob URL 用于图片预览
      setImage(URL.createObjectURL(event.target.files[0]));
    }
  };

  /**
   * 处理图片移除点击事件
   */
  const handleOnImageRemoveClick = () => {
    // 1. 重置图片状态，清除预览
    setImage("noImage");
    // 2. 关键步骤：清除文件输入框的 value 属性
    //    这使得即使再次选择相同文件，onChange 事件也能被触发
    if (inputRef.current) {
      inputRef.current.value = "";
    }
    // 注意：如果之前创建了 Blob URL，为了避免内存泄漏，
    // 可以在这里调用 URL.revokeObjectURL(oldImageURL)
    // 但在这个简单的例子中，旧的 URL 会被垃圾回收机制处理。
  };

  return (
    <div className="image-uploader-container">
      <span>
        {/* 文件输入框，通过 ref 关联 */}
        <input
          ref={inputRef}
          type="file"
          className="d-none" // 隐藏默认的文件输入框，通过其他UI触发
          onChange={handleImageChange}
          // 当有图片时禁用文件输入框，防止重复上传
          disabled={image !== "noImage"}
          accept="image/*" // 限制只接受图片文件
        />

        {/* 根据图片状态显示不同的UI */}
        {image !== "noImage" ? (
          // 已上传图片时的UI
          <div>
            <img src={image} alt="Uploaded" style={{ maxWidth: '200px', maxHeight: '200px', display: 'block', margin: '10px auto' }} />
            <div className="d-flex justify-content-center">
              <Button variant="warning" onClick={handleOnImageRemoveClick}>
                移除图片
              </Button>
            </div>
          </div>
        ) : (
          // 未上传图片时的UI
          <div
            className="upload-placeholder"
            onClick={() => inputRef.current?.click()} // 点击此区域触发文件选择
            style={{ border: '2px dashed gray', padding: '20px', textAlign: 'center', cursor: 'pointer' }}
          >
            <p>点击此处上传图片</p>
          </div>
        )}
      </span>
    </div>
  );
};

export default ImageUploader;