antd Upload组件上传状态一直处于uploading
对于受控模式,需要在 onChange
中始终 setState fileList
,保证所有状态同步到 Upload 内
import { UploadFile, UploadProps } from 'antd/es/upload/interface';
...
const [fileList, setFileList] = useState<UploadFile[]>([]);
const uploadProps: UploadProps = {
accept: '*',
maxCount: 1,
action: 'url',
onChange(info: any) {
if (info.file.status === 'done') {
if (info.file.response.code === 201) {
//form.setFieldsValue({ filePath: info.file.response.data.fullPath });
console.log(info.file.name);
setFileList(info.fileList);
notification.success({ key: 'success', message: `上传成功!` });
} else {
notification.error({ key: 'error', message: `${info.file.name} 上传失败!` });
}
}
if (info.file.status === 'error') {
notification.error({ key: 'error', message: `${info.file.name} 上传失败!` });
}
//每次onChange都需要更新fileList
setFileList(info.fileList);
},
fileList: fileList,
};
}
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e;
}
if (e.file.status === 'done') {
return e.file.response.data.fullPath;
}
return e && e.fileList;
};
...
<Form.Item
label="文件"
name="filePath"
valuePropName="file"
getValueFromEvent={normFile}
>
<>
<Upload
name="file"
{...uploadProps}
>
<Button icon={<UploadOutlined />}>上传文件</Button>
</Upload>
</>
</Form.Item>