背景
需要实现的需求：在一个表单提交中，需要提交各种组件的提交信息，其中包括上传文件；一般呢，我们会在选择文件的时候将文件先传到服务器，拿到文件的URL,在提交表单的时候传的其实是文件的URL；
刚开始，对文件没有必填的校验，是比较简单的；但是后来要求文件是必传的，需要加上文件的校验，就暴漏了一些小问题；
实现
首先，先对Upload组件加上必传的校验
rules={[{ required: true, message: "请上传文件" }]}，
直接添加required校验，肯定是不行的，我们需要自定义文件的校验；
dom结构大体是这样：
<Item label="上传文件" name="file" rules={[{ required: true, validator: checkFile }]}>
<Upload {...uploadProps}>
<div className="upload-content">
{imgUrl ? (
<div className="upload-cover">
<img src={imgUrl} />
</div>
) : (
<div className="upload-btn">{imgLoading ? <LoadingOutlined /> : <PlusOutlined />}</div>
)}
</div>
</Upload>
</Item>
校验：
const checkFile = (rule: any, value: any) => {
if (!value) {
return Promise.reject("请上传文件");
}
return Promise.resolve();
};
问题1:
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
但是控制台报错：
warning.js:6 Warning: [antd: Upload] value is not a valid prop, do you mean fileList?
按照指示：在Item组件上加上：valuePropName="fileList"，发现控制台的报错确实没有了；
但是新的问题来了，当我们上传文件的时候，画面直接崩了！！
问题2:
Uncaught TypeError: (fileList || []).forEach is not a function
参照官网：ant.design/components/…
在Item组件上添加getValueFromEvent事件；
<Item
label="上传文件"
name="file"
valuePropName="fileList"
rules={[{ required: true, validator: checkFile }]}
getValueFromEvent={normFile}
>
const normFile = (e: any) => {
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
最后效果：
tip1:注意一下新增和修改时校验方法
这时候校验是没问题了，但是，如果你和我一样，新增的提交和编辑的提交公用的时候，这一块校验还是会有问题；编辑内容的时候我们拿到的是文件的URL地址，不是文件对象，那么校验就会一直过不去；
所以校验方法就需要改一下，判断条件也要加上URL，这一块就不贴代码了～
tip2: 注意一下beforeUpload的返回值
这里顺道提一下，ant design 中如果不想走默认的上传，就可以beforeUpload身上做文章了，但是一定要注意拦截默认上传的条件是：
若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传
因为我在这个方法开始的时候对文件的大小进行了限制，如果不满足就终止，但是，习惯性的写成了return；这时候并没有阻止默认上传的行为；需要改写为return false；
以上就是Ant Design_Form表单上传文件组件实现详解的详细内容，更多关于Ant Design_Form表单上传文件组件的资料请关注编程网其它相关文章！
