Ошибка: Ant-design не показывает успешное сообщение при загрузке

Я новичок в ReactJS, в настоящее время я работаю над формой и используется Ant-design для формы в React. Данные успешно отправлены на сервер, но в форме они отображают поле загрузки файла. Я верю, что допустил ошибку в коде, но не могу это исправить. Не могли бы вы мне помочь? Я тоже поделюсь ant-design Ссылка и my Form code, Я использую API для хранения данных в БД.

Ссылка: Ant-design Ссылка для загрузки

Мой код

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

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

const props = {
  name: 'file',
  action: '//jsonplaceholder.typicode.com/posts/',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

class RegisterStepTwo extends React.Component {
  handleUpload = e => {
    const reader = new FileReader();
    const storeUser = JSON.parse(localStorage.getItem('user'));
    reader.onload = function(upload) {
      fetch(`http://138.197.207.41:9000/api/s3/uploadtoaws`, {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          userId: storeUser._id,
          type: 'employee',
          content: upload.target.result,
          key: 'dummyKey',
          oldKey: '',
        }),
      })
        .then(response => response.json())
        .then(res => {
          console.warn(res);
        })
        .done();
    };

    reader.readAsDataURL(e.file.originFileObj);
  };

  render() {
    const { getFieldDecorator } = this.props;
    return (
      <div>
        <PhotoText>Select a Photo to Upload</PhotoText>

        <Form onSubmit={this.handleSubmit}>
          <FormItem>
            {getFieldDecorator('picture', {
              rules: [
                {
                  required: true,
                  message: 'Please upload picture!',
                },
              ],
            })(
              <Upload onChange={this.handleUpload} {...props}>
                <Button>
                  <Icon type="upload" /> Click to Upload
                </Button>
              </Upload>,
            )}
          </FormItem>

          {/* <PhotoText>Select a Video to Upload</PhotoText>
          <FormItem>
            {getFieldDecorator('video', {
              rules: [
                {
                  required: true,
                  message: 'Please upload video!',
                },
              ],
            })(
              <Upload>
                <Button>
                  <Icon type="upload" /> Click to Upload
                </Button>
              </Upload>,
            )}
          </FormItem> */}
        </Form>
      </div>
    );
  }
}
export default RegisterStepTwo;

0 ответов

Другие вопросы по тегам