Ошибка: 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;