React简易文件上传组件开发求助：实现上传后文件名提示功能

以下是满足你需求的最简实现，核心通过React状态跟踪文件选择和上传状态，点击上传后显示指定提示：

import { useState } from 'react';

function FileUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadMessage, setUploadMessage] = useState('');

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
    setUploadMessage('');
  };

  const handleUpload = () => {
    if (!selectedFile) {
      setUploadMessage('请先选择一个文件');
      return;
    }
    // 若需要真实上传，可替换以下代码为API请求
    // 示例：
    // const formData = new FormData();
    // formData.append('file', selectedFile);
    // fetch('/api/upload', { method: 'POST', body: formData })
    //   .then(() => setUploadMessage(`You uploaded ${selectedFile.name}`))
    //   .catch(() => setUploadMessage('上传失败'));

    // 模拟上传成功，显示提示
    setUploadMessage(`You uploaded ${selectedFile.name}`);
    // 重置文件选择框，方便再次选择
    setSelectedFile(null);
    document.getElementById('file-input').value = '';
  };

  return (
    <div style={{ padding: '1rem' }}>
      <input
        id="file-input"
        type="file"
        onChange={handleFileChange}
        style={{ marginRight: '0.5rem' }}
      />
      <button onClick={handleUpload} disabled={!selectedFile}>
        上传
      </button>
      {uploadMessage && (
        <p style={{ marginTop: '1rem', color: '#27ae60' }}>
          {uploadMessage}
        </p>
      )}
    </div>
  );
}

export default FileUploader;

关键说明： #

• 文件选择监听：通过input[type="file"]的onChange事件获取选中文件，同时清空之前的提示信息。
• 上传逻辑控制：点击按钮时先校验是否有选中文件，无文件则提示用户；有文件则执行模拟（或真实）上传操作，完成后设置提示文本。
• UI交互优化：未选择文件时上传按钮禁用，避免无效点击；上传完成后重置文件选择框，支持重复选择操作。
• 提示样式：用绿色文本显示提示信息，提升辨识度。

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