ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

antd表单验证图片 必须上传

2021-07-19 18:31:46  阅读:259  来源: 互联网

标签:自定义 rule 表单 value antd 上传 图片


需求:表单提交的时候,需要先上传图片

直接使用<formItem>加require属性并不生效,antd 4.0以后版本也没有getFieldDecorator方法,所以需要自定义表单验证规则。

 rules里面有validator属性作为自定义校验,接收一个promis作为返回值,这里有两个个参数,rule是规则,value是你上图片的值

              <FormItem
                required
                label="上传产品图片"
                name="fileList"
                rules={[{ validator: checkPic }]}
              >
                <Upload
                  multiple
                  fileList={fileList}
                  customRequest={customRequest}
                  onRemove={onRemove}
                >
                  <Button type="link" size="small">
                    点击上传
                  </Button>
                </Upload>
              </FormItem>

  

  const checkPic = (rule: any, value: []) => {
    console.log(rule)
    return new Promise((resolve, reject) => {
      if (!value) {
        reject(new Error('请上传图片'))
      } else {
        resolve(value)
      }
    })
  }

  4.0以下版本可以参考这篇文章:https://www.cnblogs.com/ljy-/articles/14047122.html

标签:自定义,rule,表单,value,antd,上传,图片
来源: https://www.cnblogs.com/leise/p/15031667.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有