Проверить загрузку файлов в ReactJs - PullRequest
Новая
       6

Проверить загрузку файлов в ReactJs

0 голосов
/ 24 ноября 2018

Я Брэд, я новичок в ReactJS, в настоящее время я работаю над формой ant-design.Я хочу проверить правильность ввода входного файла для пустых полей ввода файла и отобразить сообщение «пожалуйста, прикрепите файл», я не могу написать код для этого модуля, пожалуйста, помогите мне, и я очень застрял

Код моей формы 

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;

1 Ответ

0 голосов
/ 24 ноября 2018

Похоже, вы ищете функцию beforeUpload (прокрутите немного вниз).

Добавьте эту функцию в подпорки и проверьте содержимое формы внутри нее (проверьте ее).Согласно документации, возвращение false должно остановить загрузку.

Редактировать: Я действительно не должен писать код для вас.В любом случае, что-то вроде этого должно работать: 

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

Есть пример - нажмите на символ < >, чтобы увидеть код.Перед тем как функция загрузки принимает аргумент файла, добавляет его в список и возвращает false, тем самым предотвращая загрузку.Пользователь должен нажать кнопку, чтобы сделать это.Вместо этого вы должны проверить переменную (если она не пустая), показать сообщение (message.error ()) и вернуть false.

...