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

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

function ImageUploaderProblematic() {
  const [image, setImage] = useState<any>("noImage");
  const [isImageUploaded, setIsImageUploaded] = useState<boolean>(false);

  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      setImage(URL.createObjectURL(event.target.files[0]));
      setIsImageUploaded(true);
    }
  };

  const handleOnImageRemoveClick = () => {
    setIsImageUploaded(false);
    setImage("noImage");
  };

  return (
    <div>
      <span>
        <input
          type="file"
          className="d-none" // 隐藏默认的文件输入框，通常配合自定义UI
          onChange={handleImageChange}
          disabled={isImageUploaded}
        />
        {isImageUploaded ? (
          <div>
            <img src={image} alt="Uploaded" style={{ maxWidth: '200px', maxHeight: '200px' }} />
            <div className="d-flex justify-content-center mt-2">
              <Button variant="warning" onClick={handleOnImageRemoveClick}>
                移除图片
              </Button>
            </div>
          </div>
        ) : (
          <div>
            <p>点击上传图片</p>
            {/* 这里的按钮或区域会触发隐藏的input点击事件 */}
            <Button onClick={() => document.querySelector<HTMLInputElement>('input[type="file"]').click()}>
              选择图片
            </Button>
          </div>
        )}
      </span>
    </div>
  );
}

export default ImageUploaderProblematic;

import React, { useState, useRef } from 'react';
import { Button } from 'react-bootstrap';

function ImageUploaderOptimized() {
  const [image, setImage] = useState<string>("noImage"); // 使用string类型，"noImage"表示未上传
  const inputRef = useRef<HTMLInputElement>(null); // 创建一个ref来引用文件输入框

  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      setImage(URL.createObjectURL(event.target.files[0]));
    }
  };

  const handleOnImageRemoveClick = () => {
    setImage("noImage"); // 重置图片状态
    if (inputRef.current) {
      inputRef.current.value = ""; // 关键：清空文件输入框的value
    }
  };

  // 根据image状态判断是否已上传图片
  const isImageUploaded = image !== "noImage";

  return (
    <div>
      <span>
        <input
          ref={inputRef} // 将ref关联到文件输入框
          type="file"
          className="d-none"
          onChange={handleImageChange}
          disabled={isImageUploaded} // 根据图片是否上传来禁用输入框
        />
        {isImageUploaded ? (
          <div>
            <img src={image} alt="Uploaded" style={{ maxWidth: '200px', maxHeight: '200px' }} />
            <div className="d-flex justify-content-center mt-2">
              <Button variant="warning" onClick={handleOnImageRemoveClick}>
                移除图片
              </Button>
            </div>
          </div>
        ) : (
          <div>
            <p>点击上传图片</p>
            {/* 通过点击按钮触发隐藏的input点击事件 */}
            <Button onClick={() => inputRef.current?.click()}>
              选择图片
            </Button>
          </div>
        )}
      </span>
    </div>
  );
}

export default ImageUploaderOptimized;