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表单验证上传图片出现的问题的更多相关文章

  1. element-ui Form表单验证

    element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...

  2. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  3. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  4. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  5. form表单验证2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  7. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  8. django form表单验证

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...

  9. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

随机推荐

  1. ThreadPoolExecutor源码分析一

           在线程池出现之前,每次需要使用线程,都得创建一个线程.但是,在java的运行环境中,创建一个线程是非常耗费资源和时间的.是否可以把线程重复利用,减少线程的创建次数.基于此,java1.5 ...

  2. C# ado.net 使用task和await(四)

    class Program { private static string constr = "server=.;database=northwnd;integrated security= ...

  3. mysql5.7备份

    一.备份准备&备份测试 1.备份目录准备 #mysql专用目录 mkdir /mysql #mysql备份目录 mkdir /mysql/backup #mysql备份脚本 mkdir /my ...

  4. 内置对象:Math

    JavaScript内置函数Math.random()自定义封装函数:1,Math.floor(Math.random()*(b-a+1)+a)  随机生成a到b之间的整数. 也可以写成:Math.f ...

  5. mysql关于索引的一些零碎知识点(持续更新)

    1.is null可以使用索引(网上很多文章存在误导,这个确实可以使用索引),is not null无法使用索引. 2.为什么重复数据较多的列不适合使用索引? 假如索引列TYPE有5个键值,如果有1万 ...

  6. OBDSTAR X300 PRO3详细评论

    OBDSTAR 公司的X300 PRO3钥匙主控系统具有SKP900的防盗锁钥匙编程功能,以及新功能,例如,测速计调节,EEPROM / PIC和OBDII.它的风格完全符合工业惯例,例如,它采用双边 ...

  7. Ecplilse使用

    0 注意版本 新版本对JDK的支持是有限的,如果Ecplise版本过高,而JDK版本低的话可能会不支持JDK 1.快捷键 右键-->source中可快速生成get set  重写方法 2.Deb ...

  8. Laravel 多态关联中利用关联表相关字段进行排序的问题

    1 目标 1.1 在 Laravel 项目的开发中,多态的需求很常见,按多态关联进行排序的需求也是必须的. 1.2 请想像,我们有一个需求,荣誉栏目多态关联一个档案模型,要求在荣誉中按档案的推荐时间进 ...

  9. B/S上传大文件的解决方案

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  10. 集合家族——LinkedList

    一.概述: LinkedList 与 ArrayList 一样实现 List 接口,只是 ArrayList 是 List 接口的大小可变数组的实现,LinkedList 是 List 接口链表的实现 ...