如何基于MUI实现适配小空间的React文件上传组件

核心思路是隐藏原生<input type="file">元素，通过MUI的TextField（搭配FileUploadOutlined图标）作为交互入口，点击时触发原生文件输入框的点击事件，以此唤起文件选择弹窗。

具体实现代码（React + MUI） #

import { useState, useRef } from 'react';
import TextField from '@mui/material/TextField';
import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
import Box from '@mui/material/Box';

const CustomFileUpload = () => {
  const [fileName, setFileName] = useState('');
  const fileInputRef = useRef(null);

  // 触发文件选择弹窗
  const handleUploadClick = () => {
    fileInputRef.current?.click();
  };

  // 处理文件选择后的逻辑
  const handleFileChange = (e) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setFileName(selectedFile.name);
      // 这里可以添加文件上传的逻辑，比如调用API上传
    }
  };

  return (
    <Box sx={{ width: 60 }}>
      {/* 隐藏原生文件输入框 */}
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        style={{ display: 'none' }}
      />
      {/* MUI TextField 作为触发入口 */}
      <TextField
        variant="outlined"
        size="small"
        value={fileName}
        placeholder="上传"
        onClick={handleUploadClick}
        InputProps={{
          endAdornment: (
            <FileUploadOutlined onClick={handleUploadClick} sx={{ cursor: 'pointer' }} />
          ),
          readOnly: true, // 禁止手动输入内容
        }}
        sx={{
          '& .MuiOutlinedInput-root': {
            '&:hover fieldset': { borderColor: '#1976d2' },
            cursor: 'pointer',
          },
        }}
      />
    </Box>
  );
};

export default CustomFileUpload;

关键细节说明 #

• 用useRef获取原生<input type="file">的DOM引用，方便在点击MUI组件时调用其click()方法。
• 将原生输入框设为display: none隐藏，只保留MUI组件作为交互界面。
• 给TextField和图标都绑定handleUploadClick事件，确保点击任意区域都能触发文件选择。
• 设置TextField为readOnly，避免用户手动输入内容，保持组件的上传交互逻辑。
• 在handleFileChange中处理文件选中后的逻辑，比如显示文件名、调用上传接口等。

这样就能在50-60px的窄空间里实现美观且功能完整的文件上传组件，完全替代原生<input type="file">的功能。

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