我正在尝试基于 API 将表单数据发送到服务器,但是每次单击上传按钮时,都会出现以下错误:
找不到本地主机 404
我怎样才能确定我的代码中是否有任何错误?
我还将分享我的表单的代码片段。我将 ant-design 用于表单和上传。
代码片段
import React from 'react';
import styled from 'styled-components';
import 'antd/dist/antd.css';
import { Form, Upload, message, Button, Icon } from 'antd';
import reqwest from 'reqwest';
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;
`;
class RegisterStepTwo extends React.Component {
constructor(props) {
super(props);
console.log(props);
}
handleUpload = e => {
// You can use any AJAX library you like
console.log(e.file.originFileObj);
var reader = new FileReader();
var obj = JSON.parse(localStorage.getItem('user'));
reader.onload = function(upload) {
const userOject = {
...obj,
uri: upload.target.result,
};
reqwest({
url: fetch(`http://138.197.207.41:9000/api/s3/uploadtoawsapi`, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
method: 'POST',
body: JSON.stringify({
userId:userObject,
type,
content,
key,
oldKey,
}),
}),
success: () => {
message.success('upload successfully.');
},
error: () => {
message.error('upload failed.');
},
});
};
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>
<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;