0

我正在尝试基于 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;
4

0 回答 0