React verwendet die Upload-Komponente von Antd, um die Funktion zum Senden von Dateiformularen zu implementieren (vollständiger Code).

Ich habe gerade angefangen, React für Projekte zu verwenden, und ich bin sehr unerfahren und ein absoluter Neuling. Auch Neulinge können es lesen, da das, was ich schreibe, sehr einfach und unkompliziert ist.

Das Projekt muss die Übermittlung von Anhängen im Formular implementieren. Die hochgeladenen Dateien dürfen nicht separat gespeichert werden, sondern müssen über die Schnittstelle aufgerufen werden.

importiere { Formular, Button, Upload } von „antd“;
importiere { UploadOutlined } von '@ant-design/icons';
  
  const normFile = (e) => {
    console.log('Upload-Ereignis:', e);
    wenn (Array.isArray(e)) {
      Rückkehr e;
    }
    gibt e und e.Dateiliste zurück;
  };
  const Demo = () => {
    const onFinish = (Werte) => {
      console.log('Empfangene Werte der Form: ', Werte);
    };
  
    zurückkehren (
      <Formular
        Name="anderes validieren"
        beimFertigstellen={beimFertigstellen}
        Anfangswerte={{
          'Eingabenummer': 3,
          'Kontrollkästchengruppe': ['A', 'B'],
          Bewertung: 3,5,
        }}
      >
        <Formular.Element
          Name="Hochladen"
          label="Hochladen"
          valuePropName="Dateiliste"
          getValueFromEvent={normFile}
        >
          <Uploadname="Logo" Aktion="/upload.do" Listentyp="Bild">
            <Button icon={<UploadOutlined />}>Zum Hochladen klicken</Button>
          </Hochladen>
        </Form.Item>
      </Form>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);

Hier ist ein Formular, das eine Funktion zum Hochladen von Dateien enthält. (Tatsächlich ist der Code hier ein Beispiel aus der offiziellen Dokumentation von Antd. Ich habe nur die redundanten Teile gelöscht und den Rest so gelassen, wie er ist.)

Nachfolgend finden Sie eine Erklärung.

Zunächst müssen wir darüber nachdenken, wie wir das automatische Hochladen von Dateien verhindern können. Das Antd-Dokument enthält eine Methode namens beforeUpload. Wenn die Methode beforeUpload false zurückgibt, wird der Dateiupload gestoppt.

Durch das Obige wird das automatische Hochladen von Dateien gestoppt. Als Nächstes überlegen wir, wie wir die hochgeladene Datei erhalten und in den an das Backend übergebenen Parametern speichern.

Dieser Teil des Codes ist die Upload-Code-Methode, da wir die Datei hochladen und zusammen mit dem Formular übermitteln müssen. Daher nehmen wir einige Änderungen an dieser Methode vor und speichern die Datei im FormData-Objekt. Hier erklären wir zunächst das formData-Objekt, welches hauptsächlich zum Übertragen von Dateien an das Backend verwendet wird.

Erstellen Sie zunächst ein neues formData-Objekt und hängen Sie dann die Datei daran an, sodass die hochgeladene Datei bereits in formData gespeichert ist.

Auch andere Daten im Formular können auf die gleiche Weise in formData gespeichert und formData an das Backend übergeben werden.

Es gibt ein weiteres Problem, das derzeit Aufmerksamkeit erfordert.

holen(URL, {

        //Abrufanforderungsmethode: 'POST',

        Textkörper: Formulardaten,

})

oder

 axios({ //axios
        Methode: 'post',
        URL: URL,
        Daten: Formulardaten,
    })
    .then(Funktion (Antwort) {
        console.log(Antwort);
    })
    .catch(Funktion (Fehler) {
        konsole.log(Fehler);
    });

Es muss für eine erfolgreiche Parameterübergabe gesetzt sein, da sonst die Parameter beim Aufruf der Schnittstelle nicht erfolgreich übergeben werden.

Wie sieht es aus, wenn Parameter erfolgreich übertragen werden? Sie können auf der entsprechenden Seite F12 drücken, um das Netzwerk anzuzeigen. Unten wird eine Spalte „Formulardaten“ angezeigt, in der alle übergebenen Parameter angezeigt werden.

Der endgültige Code lautet wie folgt:

importiere { Formular, Button, Upload } von „antd“;
importiere { UploadOutlined } von '@ant-design/icons';
  
  const normFile = (e) => {
    console.log('Upload-Ereignis:', e);
    wenn (Array.isArray(e)) {
      Rückkehr e;
    }
    gibt e und e.Dateiliste zurück;
  };
  const vorUpload = ({Dateiliste}) => {
      gibt false zurück;
  }
  const Demo = () => {
    const onFinish = (Werte) => {
      console.log('Empfangene Werte der Form: ', Werte);
    };
  
    zurückkehren (
      <Formular
        Name="anderes validieren"
        beimFertigstellen={beimFertigstellen}
        Anfangswerte={{
          'Eingabenummer': 3,
          'Kontrollkästchengruppe': ['A', 'B'],
          Bewertung: 3,5,
        }}
      >
        <Formular.Element
          Name="Hochladen"
          label="Hochladen"
          valuePropName="Dateiliste"
          getValueFromEvent={normFile}
        >
          <Uploadname="Logo"  
            vorUpload={vorUpload}
          >
            <Button icon={<UploadOutlined />}>Zum Hochladen klicken</Button>
          </Hochladen>
        </Form.Item>
      </Form>
    );
  };
  
  ReactDOM.render(<Demo />, mountNode);

Dies ist das Ende dieses Artikels über die Verwendung der Upload-Komponente von Antd in React zum Senden von Dateien zusammen mit dem Formular. Weitere relevante React-Implementierungen von Inhalten zum Senden von Dateiformularen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!