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

私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私が書く内容は非常にシンプルでわかりやすいので、初心者でも読むことができます。

プロジェクトでは、フォームでの添付ファイルの送信を実装する必要があり、アップロードされたファイルは個別に保存されず、インターフェースが呼び出されます。

'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);

これはファイルアップロード機能を含むフォームです。 (実際、ここでのコードは Antd の公式ドキュメントからの例です。冗長な部分のみを削除し、残りはそのまま残しました)。

以下説明です。

まず、ファイルが自動的にアップロードされないようにする方法を考える必要があります。 antd ドキュメントには beforeUpload というメソッドが記載されています。beforeUpload メソッドが false を返すと、ファイルのアップロードは停止します。

上記により、ファイルの自動アップロードが停止されます。次に、アップロードされたファイルを取得し、バックエンドに渡されるパラメータに保存する方法を検討します。

このコードの部分はアップロードコードメソッドです。ファイルをアップロードしてフォームと一緒に送信する必要があるためです。そこで、このメソッドにいくつか変更を加え、ファイルを formData オブジェクトに保存します。ここではまず、バックエンドにファイルを転送するために主に使用される formData オブジェクトについて説明します。

まず新しい formData オブジェクトを作成し、そこにファイルを追加します。これにより、アップロードされたファイルは formData に既に保存されます。

フォーム内の他のデータも同様に formData に保存でき、formData はバックエンドに渡すことができます。

現時点で注意が必要な別の問題があります。

フェッチ(url, {

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

        本文: フォームデータ、

})

または

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

パラメータを正常に渡すには設定する必要があります。そうしないと、インターフェイスを呼び出すときにパラメータが正常に渡されません。

パラメータを正常に送信すると、どのように見えるでしょうか? 関連するページで F12 をクリックすると、ネットワークが表示され、下部にフォームデータ列が表示され、渡されたすべてのパラメータが表示されます。

最終的なコードは次のようになります。

'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);

これで、Antd のアップロードコンポーネントを使用してフォームと一緒にファイルを送信する方法についての説明は終わりです。React によるファイルフォーム送信コンテンツの実装の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: