MUI 文件输入（仅接受图像）

Question

我有一个使用 MUI 文件输入 反应的文件输入。我有一个运行良好的代码。但是，如何限制此文件输入仅接受图像？

这些是我迄今为止的工作：

const [locationImg, setLocationImg] = useState(null)

  const handleLocationImgChange = locationImg => {
    setLocationImg(locationImg)
  }

return(
 <MuiFileInput value={locationImg} onChange={handleLocationImgChange} multiple size='small' fullWidth />
)

Answer 1

正如他们的文档中提到的，也可以使用MUI TextField的道具。

<MuiFileInput
  inputProps={{ accept: "image/png, image/gif, image/jpeg" }}
  value={locationImg}
  onChange={handleLocationImgChange}
  multiple
  size="small"
  fullWidth
/>;

Answer 2

在 MUIv6 inputProps 中已弃用，因此您必须使用

slotProps

，正如他们在文档中所说，所以这就是解决方案：

<TextField
   type="file"
   slotProps={{
     input: {
       inputProps: {
         accept: // kind of files you want (image/png, application/pdf, ...)
       },
     },
   }}
/>