Antd自定义表单验证 判断图片是否存在

Antd自定义表单验证 判断图片是否存在

// 触发表单验证
 const onCheck = () => {
    props.form.validateFields()
      .then((values) => {
        let cur = {
          type: props.type,
          id: props.curData.id,
        };
        props.addSuc(values, cur);
      })
      .catch((err) => {
        console.log('err', err);
      });
  };


// 图片自定义验证
// Image的onload方法是异步的，这里通过Promise来解决该问题
// 如果图片链接不正确，会自动进入Image的onerror方法中去
  const checkUrl = (rule, value) => {
    return new Promise((resolve, reject) => {
      if (!value) {
        reject('请输入图片链接');
      } else {
        const img = new Image();
        img.src = value;
        img.onload = () => {
          console.log('宽', img.width);
          console.log('高', img.height);
          if (!(img.width === 333 && img.height === 184)) {
            reject('图片错误');
          }
          resolve();
        };
        img.onerror = () => {
          reject('图片错误');
        };
      }
    });
  };



<Form.Item name="actPicture" rules={[{ validator: checkUrl }]}>
	<Input placeholder="请输入活动图片" />
</Form.Item>