在表单中我们可以直接获取upload的值,并且可以赋值给这个组件,具体的作法如下:
import {Upload} from 'antd';
const uploadButton = (
<div>
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</div>
);
normFile = (e) => {
if (e.file.status === 'uploading') {
return [e.file];
}
if (e.file.status === 'done') {
return [{
uid: e.file.uid,
name: e.file.response.data.name,
status: 'done',
url: e.file.response.data.url,
}];
}
}
<Form>
<Form.Item label='上传'>
{getFieldDecorator('upload',{
initialValue:[{uid: 1,status: 'done' , url: '图片的url' }],
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<Upload action="上传的地址" {其他属性} >
{
form.getFieldValue('url')
&& form.getFieldValue('url')[0]
&& form.getFieldValue('url')[0].status === 'done' ? null : uploadButton
}
</Upload>
)}
</Form.Item>
</Form>
本文详细介绍了如何在Ant Design的表单中使用Upload组件,包括直接获取上传文件的值、设置初始值、处理上传状态以及如何根据上传状态显示不同的UI元素。

5973

被折叠的 条评论
为什么被折叠?



