ant-pro使用Form表单验证上传图片出现的问题

1、复现：用antd的Form表单验证上传图片必填项时出现问题：复现过程，先提交，提示图片需要上传，上传成功后，依旧提示：图片未上传

2、表单验证原理：先理解一下antd的Form表单验证的表层原理，每个表单getFieldDecorator配置项都有个名字，比如就叫goodsSkuImg，这个goodsSkuImg对应this.props.form.goodsSkuImg如果为空则验证不通过。

3、结论：Form提示的根本原因是this.props.form.goodsSkuImg值为空

4、解决方案：

在上传时调用如下

this.props.form.setFieldsValue({ goodsSkuImg: [{ uid: publicUrl, name: file.name, status: 'done', url: publicUrl, }] });

此时this.props.form.goodsSkuImg就不为空验证通过

5、注意：在移出图片的方法中也需要调用

this.props.form.setFieldsValue({ goodsSkuImg: undefined });

使得this.props.form.goodsSkuImg为空，表单验证不通过

转载于:https://www.cnblogs.com/piaobodewu/p/10498896.html

相关资源：数据结构—成绩单生成器