首页 > Web开发 > 详细

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

时间:2019-03-09 00:13:28      阅读:265      评论:0      收藏:0      [点我收藏+]

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表单验证上传图片出现的问题

原文:https://www.cnblogs.com/piaobodewu/p/10498896.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!