antd 在Input输入框中当图片上传成功,前面显示成功的小图标
时间: 2024-03-06 20:49:34 浏览: 104
可以通过使用 `Upload` 组件和 `Form` 组件来实现在 `Input` 输入框中上传图片并显示上传成功的小图标。
首先,需要在 `Form` 表单中使用 `Upload` 组件来上传图片,将上传成功后的图片地址存储在表单中的一个字段中。例如:
```
<Form.Item name="image">
<Upload
name="image"
action="/upload"
listType="picture"
onChange={handleChange}
>
<Button icon={<UploadOutlined />}>上传图片</Button>
</Upload>
</Form.Item>
```
其中,`handleChange` 函数可以在图片上传成功时将图片地址存储在表单中:
```
const handleChange = (info) => {
if (info.file.status === 'done') {
form.setFieldsValue({
image: info.file.response.url,
});
}
};
```
接着,在 `Input` 输入框中使用 `Icon` 组件来显示上传成功的小图标。例如:
```
<Input
prefix={<Icon type="check-circle" style={{ color: 'green' }} />}
placeholder="上传成功的图片地址"
value={form.getFieldValue('image')}
/>
```
当图片上传成功后,输入框前面会显示一个绿色的小勾图标,表示上传成功。
阅读全文