antd 5.6版本的Upload上传组件手动上传怎么在表单的确定按钮的方法里面设置进度条
时间: 2023-12-21 22:07:26 浏览: 97
在react-antd中弹出层form内容传递给父组件的操作
要在表单的确定按钮的方法里面设置进度条,你需要在表单提交时调用上传函数,并在上传函数中使用 `onProgress` 属性来监听上传进度,并通过回调函数更新进度条的状态。
以下是一个示例代码:
```
import { Form, Upload, Button, message, Progress } from 'antd';
import axios from 'axios';
const MyForm = () => {
const [form] = Form.useForm();
const [progress, setProgress] = useState(0);
const handleUpload = ({ file }) => {
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
setProgress(percentCompleted);
},
})
.then((res) => {
message.success(`${file.name} 上传成功`);
})
.catch((err) => {
message.error(`${file.name} 上传失败`);
});
};
const onFinish = (values) => {
// 在确定按钮的方法里调用上传函数
handleUpload(values.file);
// 在这里可以继续处理表单提交的逻辑
// ...
};
return (
<Form form={form} onFinish={onFinish}>
<Form.Item name="file">
<Upload>
<Button>上传文件</Button>
</Upload>
</Form.Item>
<Progress percent={progress} />
<Form.Item>
<Button type="primary" htmlType="submit">
确定
</Button>
</Form.Item>
</Form>
);
};
```
在上面的代码中,我们首先定义了一个 `progress` 状态来保存上传进度,然后在 `handleUpload` 函数中使用 `axios` 发送上传请求,并在 `onUploadProgress` 回调函数中更新 `progress` 状态。在表单的确定按钮的方法 `onFinish` 中,我们调用了上传函数 `handleUpload`,并在上传函数中更新进度条状态。最后,我们将进度条组件的 `percent` 属性设置为 `progress` 状态,即可实现上传时的进度条显示。
阅读全文