Question

<Input
 id="image"
 type="file"
 accept="image/*"
 onChange={event =>
  getBase64(event.target.files[0]).then(file =>
   this.setState({ image: file })
 )
}
/>

**但是它也接受其他文件**，我应该更改使其仅接受图像

Answer 1

文件输入具有accept属性，可用于此（docs）。

Answer 2

要在accept上设置<Input />属性，您需要像这样使用inputProps

<Input type="file" inputProps={{ accept: 'image/*' }} />

编辑几个月后看这个并阅读@Aprillions的评论，我认为最好澄清这是Material-UI而不是纯React

Answer 3

问题可能是您更改了accept属性后已经通过或修改了道具。所以，您有一个解决方案。更改您传递的属性顺序。这意味着您可以将accept属性作为最后一个属性进行传递，如下所示。

<Input
 id="image"
 type="file"
 onChange={event =>
  getBase64(event.target.files[0]).then(file =>
   this.setState({ image: file })
 )
 accept="image/*"
}
/>

如何使输入type =文件仅接受图像React

3 个答案: