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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM