在 ReactJs 中验证文件上传

Validate File Upload in ReactJs

我是 Brad,我是 ReactJS 的新手,目前我正在研究 ant-design 表单。我想验证空文件输入字段的输入文件验证并显示消息 "please attach a file",我无法为此模块编写代码请帮助我,我很困惑

我的表单代码

import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import { Upload, message, Button, Icon } from 'antd';

const PhotoText = styled.div`
  font-size: 16px;
  font-weight: bold;
  padding: 2rem 0 1rem 0;
  display: block;
  text-align: -webkit-auto;
`;

const ButtonWrapper = styled.div`
  text-align: center;
`;

let file = { id: 'test' };
const { propss } = {
  name: 'file',
  action: '//jsonplaceholder.typicode.com/posts/',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    file = info.file;
    if (info.file.status !== 'uploading') {
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
      file = info.file;
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
class RegisterStepTwo extends React.Component {
  constructor(props) {
    super(props);
    this.saveData = this.saveData.bind(this);
  }

  saveData(e) {
    this.props.addData(e, file);
  }

  render() {
    return (
      <div>
        <PhotoText>Select a Photo to Upload</PhotoText>
        <Upload {...propss}>
          <Button>
            <Icon type="upload" /> Click to Upload
          </Button>
        </Upload>
        <br />
        <PhotoText>Select a Video to Upload</PhotoText>
        <Upload {...propss}>
          <Button>
            <Icon type="upload" /> Click to Upload
          </Button>
        </Upload>
      </div>
    );
  }
}
export default RegisterStepTwo;

您似乎在寻找 beforeUpload 函数(向下滚动一点)。

将该函数添加到 props 并检查其中的表单内容(验证它)。根据文档,returning false 应该会停止上传。

编辑: 我真的不应该为你写代码。无论如何,这样的事情应该有效:

const { propss } = {
    ...code you've got so far,
    beforeUpdate(file) {
        if (file === '') {
            message.error('your error message');
            return false;
        }
    }
};

There is an an example - 单击 < > 符号查看代码。 在上传函数接受文件参数之前,将其添加到列表中,并且 returns 为 false,从而阻止上传。用户需要按下按钮才能这样做。 您应该改为检查变量(如果它不为空),显示一条消息 (message.error()) 和 return false.