Languages
[Edit]
DE

React - Datei hochladen

3 points
Created by:
Nikki
9950

In diesem Artikel wird gezeigt, wie man aus einer mit der React-Technologie geschriebenen Website ganz einfach Dateien auf den Server hochladen kann.

Das folgende Beispiel zeigt ein einfaches Formular mit einem Element┬á<input type="file" />, das man verwenden┬ákann, um auf eine beliebige Datei auf dem Computer zu zeigen. Selbst die ├ťbertragung erfolgt mit der Funktion┬áfetch(), die ein Objekt der Klasse┬áFormData┬áals Argument akzeptiert.┬á

Lauff├Ąhiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren:
// import React from 'react';
// import ReactDOM from 'react-dom';

const Form = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    fetch("/example/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => {
        response.text()
          .then((text) => console.log(text));
      })
      .catch((error) => {
        console.error("File upload error!");
      });
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="userfile">Datei ausw├Ąhlen:</label><br />
      <br />
      <input type="file" name="my-file" /><br />
      <br />
      <input type="submit" value="Genehmigen!" />
    </form>
  );
};

const root = document.querySelector("#root");
ReactDOM.render(<Form />, root);

Referenzen

  1.  FormData - MDN Docs

ReactJS (DE)

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join