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>
  1. Form 的 getValueFromEvent 返回 e?.fileList
  2. submit 的时候需要取 fileList 中每一项的 originFileObj 即二进制文件
  3. egg 后端读取,官方示例
const file = ctx.request.files?.[0];
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐