1. 在表单组件中引入Ant Design Upload组件:
import { Form, Upload } from 'antd';
2.代码使用
<Form.Item
name="file"
label="原始数据"
getValueFromEvent={normFile}
valuePropName="fileList"
>
<Upload name="file">
<Button icon={<UploadOutlined/>}>上传CSV文件</Button>
</Upload>
</Form.Item>
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
3.调用接口传参
const handleSubmit = async (values: any) => {
// 对接后端,上传数据
const params = {
...values,
file: undefined,
};
try {
// 生成
const res = await genChartByAiUsingPost(params, {}, values.file[0].originFileObj);
console.log("生成结果:" + res)
if (res.code === 0) {
message.success("成功");
} else {
message.error("失败");
}
} catch (e: any) {
message.error("分析失败" + e.message);
}
};
4.后端接收
public BaseResponse<BiResponse> genChart(@RequestPart("file") MultipartFile multipartFile,
ChartGenByAiRequest chartGenByAiRequest, HttpServletRequest request) {
//处理代码
}