React文件上传：解决移除图片后无法重复上传同一文件的问题

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

function ImageUploader() {
  // 使用一个状态来管理图片URL，"noImage"表示未上传
  const [image, setImage] = useState<string>("noImage");
  // 创建一个ref来直接访问文件输入框DOM
  const inputRef = useRef<HTMLInputElement>(null);

  // 使用useEffect来管理URL.createObjectURL生成的URL，防止内存泄漏
  useEffect(() => {
    // 返回一个清理函数，在组件卸载或image状态变化前执行
    return () => {
      if (image !== "noImage" && image.startsWith("blob:")) {
        URL.revokeObjectURL(image); // 释放旧的URL
      }
    };
  }, [image]); // 当image状态变化时重新运行此effect

  // 处理图片选择事件
  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      // 设置新的图片URL，旧的URL会在下一个渲染周期由useEffect清理
      setImage(URL.createObjectURL(event.target.files[0]));
    }
  };

  // 处理图片移除事件
  const handleOnImageRemoveClick = () => {
    // 重置图片状态为"noImage"，这将触发useEffect清理当前的图片URL
    setImage("noImage");
    // 关键步骤：清空文件输入框的value，确保可以重新上传同一文件
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  };

  return (
    <div style={{ border: '1px dashed #ccc', padding: '20px', textAlign: 'center' }}>
      {/* 隐藏默认的文件输入框，通常会配合自定义按钮使用 */}
      <input
        ref={inputRef} // 绑定ref到input元素
        type="file"
        className="d-none" // 使用d-none隐藏，需要引入Bootstrap CSS或自定义样式
        onChange={handleImageChange}
        // 根据image状态决定是否禁用文件输入框
        disabled={image !== "noImage"}
        accept="image/*" // 限制只接受图片文件
      />

      {image !== "noImage" ? ( // 如果有图片，显示移除按钮和图片预览
        <div>
          <div style={{ marginBottom: '15px' }}>
            <img src={image} alt="Uploaded Preview" style={{ maxWidth: '200px', maxHeight: '200px', border: '1px solid #eee' }} />
          </div>
          <div className="d-flex justify-content-center">
            <Button variant="warning" onClick={handleOnImageRemoveClick}>
              移除图片
            </Button>
          </div>
        </div>
      ) : ( // 如果没有图片，显示上传提示或自定义上传按钮
        <div>
          <p>点击下方按钮上传图片</p>
          {/* 添加一个自定义的上传按钮，点击时触发隐藏input的点击事件 */}
          <Button onClick={() => inputRef.current?.click()}>选择图片</Button>
        </div>
      )}
    </div>
  );
}

export default ImageUploader;