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 为空, 表单验证不通过
来源: http://www.bubuko.com/infodetail-2980951.html