React は antd のアップロード コンポーネントを使用してファイル フォーム送信機能を実装します (完全なコード)

'antd' から { フォーム、ボタン、アップロード } をインポートします。
'@ant-design/icons' から UploadOutlined をインポートします。
  
  const normFile = (e) => {
    console.log('アップロードイベント:', e);
    Array.isArray(e) の場合 {
      e を返します。
    }
    e && e.fileList を返します。
  };
  constデモ = () => {
    const onFinish = (値) => {
      console.log('フォームの受信値: ', values);
    };
  
    戻る （
      <フォーム
        名前="validate_other"
        onFinish={onFinish}
        初期値={{
          '入力番号': 3,
          'チェックボックスグループ': ['A', 'B'],
          レート: 3.5、
        }}
      >
        <フォーム.アイテム
          名前="アップロード"
          label="アップロード"
          valuePropName="ファイルリスト"
          getValueFromEvent={normFile}
        >
          <アップロード name="logo" action="/upload.do" listType="picture">
            <Button icon={<UploadOutlined />}>クリックしてアップロード</Button>
          </アップロード>
        </フォーム.アイテム>
      </フォーム>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);

フェッチ(url, {

        //リクエストメソッドを取得: 'POST',

        本文: フォームデータ、

})

 axios({ //axios
        メソッド: 'post'、
        URL: URL、
        データ: フォームデータ、
    })
    .then(関数 (応答) {
        console.log(応答);
    })
    .catch(関数 (エラー) {
        コンソール.log(エラー);
    });

'antd' から { フォーム、ボタン、アップロード } をインポートします。
'@ant-design/icons' から UploadOutlined をインポートします。
  
  const normFile = (e) => {
    console.log('アップロードイベント:', e);
    Array.isArray(e) の場合 {
      e を返します。
    }
    e && e.fileList を返します。
  };
  定数 beforeUpload = ({fileList}) => {
      false を返します。
  }
  constデモ = () => {
    const onFinish = (値) => {
      console.log('フォームの受信値: ', values);
    };
  
    戻る （
      <フォーム
        名前="validate_other"
        onFinish={onFinish}
        初期値={{
          '入力番号': 3,
          'チェックボックスグループ': ['A', 'B'],
          レート: 3.5、
        }}
      >
        <フォーム.アイテム
          名前="アップロード"
          label="アップロード"
          valuePropName="ファイルリスト"
          getValueFromEvent={normFile}
        >
          <アップロード名="logo"  
            beforeUpload={beforeUpload}
          >
            <Button icon={<UploadOutlined />}>クリックしてアップロード</Button>
          </アップロード>
        </フォーム.アイテム>
      </フォーム>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);