ant-pro使用Form表单验证上传图片出现的问题
Posted piaobodewu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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为空,表单验证不通过
以上是关于ant-pro使用Form表单验证上传图片出现的问题的主要内容,如果未能解决你的问题,请参考以下文章