Antd Form表单使用 Upload 上传 FormData 数据文件至后端

Antd Form表单使用 Upload 上传 FormData 数据文件至后端

1. Upload 通过 beforeUpload 拦截

const normFile = (e: any) => {
    return e?.fileList;
};

const handleFinish = (value: any) => {
	const { file } = value;
    const formData = new FormData();
    file.forEach((item, index) => {
		formData.append(`file-${index}`, item.originFileObj);    	
    })
}

<Form onFinish={handleFinish} >
	<Form.Item
	    name="file"
	    valuePropName="file"
	    getValueFromEvent={normFile}
	    label="文件"
	>
	    <Upload.Dragger beforeUpload={() => false} maxCount={1}>
	        <p>
	            <InboxOutlined />
	        </p>
	        <p>点击或拖拽文件到上传区域</p>
	    </Upload.Dragger>
	</Form.Item>
</Form>

2. Form 的 getValueFromEvent 返回 e?.fileList
3. submit 的时候需要取 fileList 中每一项的 originFileObj 即二进制文件
4. egg 后端读取，官方示例

const file = ctx.request.files?.[0];