咨询：Material UI是否提供支持图片附件的多行TextField组件？

Material UI没有直接提供开箱即用的「多行输入+图片上传」组合组件，但可以通过现有组件自定义拼接出你需要的效果，具体实现思路如下：

• 多行输入基础：使用TextField组件，开启multiline属性，搭配rows/rowsMax控制输入框的行数范围，满足多行文本输入需求。
• 图片上传功能：用IconButton搭配隐藏的<input type="file">触发文件选择，通过accept="image/*"限制仅允许选择图片文件；再用ImageList/ImageListItem组件实现上传图片的预览展示。

示例代码 #

import { useState } from 'react';
import { TextField, IconButton, ImageList, ImageListItem, Box } from '@mui/material';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';

const MultilineInputWithImageUpload = () => {
  const [uploadedImages, setUploadedImages] = useState([]);

  const handleImageSelect = (e) => {
    const newImages = Array.from(e.target.files).map(file => URL.createObjectURL(file));
    setUploadedImages(prev => [...prev, ...newImages]);
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 600 }}>
      {/* 多行文本输入框 */}
      <TextField
        multiline
        rows={4}
        rowsMax={8}
        fullWidth
        placeholder="输入你的内容..."
        variant="outlined"
        sx={{ marginBottom: 2 }}
      />
      {/* 图片上传与预览区域 */}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <IconButton component="label" color="primary">
          <AddPhotoAlternateIcon />
          <input
            type="file"
            hidden
            multiple
            accept="image/*"
            onChange={handleImageSelect}
          />
        </IconButton>
        <ImageList sx={{ height: 60, overflowX: 'auto' }} cols={uploadedImages.length}>
          {uploadedImages.map((imgUrl, index) => (
            <ImageListItem key={index}>
              <img src={imgUrl} alt={`上传图片${index + 1}`} loading="lazy" />
            </ImageListItem>
          ))}
        </ImageList>
      </Box>
    </Box>
  );
};

export default MultilineInputWithImageUpload;

自定义扩展方向 #

• 可以调整预览图的尺寸、布局，比如将图片预览内嵌到输入框的右下角，更贴近你提供的示例效果；
• 增加图片删除功能，给每个预览图添加删除按钮；
• 结合表单逻辑，将文本内容和上传的文件对象一起提交到后端。

内容的提问来源于stack exchange，提问作者Jean-François Handfield