首页 > Web开发 > 详细

antd表单验证图片 必须上传

时间:2021-07-19 22:54:40      阅读:21      评论:0      收藏:0      [点我收藏+]

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

直接使用<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

antd表单验证图片 必须上传

原文:https://www.cnblogs.com/leise/p/15031667.html

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