Question

我是Brad，我是ReactJS的新手，我正在从事蚂蚁设计的工作。我想验证输入文件是否为空文件输入字段，并显示消息“请附加文件”，我无法为此模块编写代码，请帮帮我，我非常棘手

我的表格代码

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;

Answer 1

看起来您正在寻找beforeUpload函数（向下滚动）。

将该功能添加到道具并检查其中的表单内容（对其进行验证）。根据文档，返回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-单击< >符号以查看代码。在上载函数接受文件参数之前，将其添加到列表中，然后返回false，从而阻止上载。用户需要按此按钮。相反，您应该检查变量（如果不为空），显示一条消息（message.error（））并返回false。

在ReactJs中验证文件上传

1 个答案: