如何移除Material UI TextField的选择文件提示与按钮 仅显示选中图片名称

实现方案 #

你原来的写法直接给TextField指定了type="file"，必然会渲染出原生文件输入控件自带的选择按钮，没法直接移除，我们可以通过「隐藏原生文件输入+用TextField做纯展示层」的方式实现需求，完整实现代码如下：

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

function ImageUploadField() {
  // 存储选中的文件名
  const [selectedFileName, setSelectedFileName] = useState('');
  // 隐藏的原生文件输入ref
  const fileInputRef = useRef(null);

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

  // 处理文件选择结果
  const handleFileChange = (e) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFileName(file.name);
      // 如果需要拿到文件对象做上传操作，可以在这里处理file变量
    }
  };

  return (
    <>
      {/* 隐藏原生文件输入控件 */}
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        accept="image/*"
        style={{ display: 'none' }}
      />
      {/* TextField仅做展示和点击触发 */}
      <TextField
        variant="outlined"
        fullWidth
        value={selectedFileName}
        onClick={handleFieldClick}
        InputProps={{
          readOnly: true, // 禁止手动输入内容
          startAdornment: (
            <InputAdornment position="start">
              <PhotoCamera />
            </InputAdornment>
          ),
        }}
      />
    </>
  );
}

实现说明 #

• 原生文件输入控件被完全隐藏，不会出现默认的选择文件按钮
• TextField仅作为展示容器，点击时会主动唤起文件选择弹窗
• 选中图片后只会把文件名写入TextField的value展示，符合需求

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