React: Wie kann ich ein Bild in den Application-Ordner /public/profile-pictures hochladen?
Ich versuche, ein soziales Netzwerk zu codieren und möchte eine Funktion zum Hochladen von Profilbildern implementieren. Ich möchte eine einfache Dateiauswahl erstellen, um die Datei im Ordner /public/profile-pictures in meinem Projekt zu speichern. Ich habe einen Client und einen Server, damit ich Axios-Anfragen von meinem Client an meinen Server senden kann. Mein Server befindet sich im Ordner /server. (Die obersten Ebenen sind also meine /src-, /server-, /public- und meine /node-modules-Ordner).
Ich habe eine funktionale Komponente wie diese:
function Edit(props) {
return (
<body>
<Helmet>
<meta charSet="utf-8" />
<title>{props.username} | Edit account</title>
</Helmet>
<Header />
<main>
<input type="file" id="file" name="file "></input>
<button onClick={/**some function */}></button>
</main>
</body>
);
}
export default Edit;
Jetzt ist meine Frage, wie ich die Datei aus der Dateiauswahl nehmen und in den Ordner /public/profile-pictures speichern kann.
Danke für die Hilfe. :D
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
- Womit schreibst du deine Serveranwendung? Auch JavaScript oder mit einer anderen Programmiersprache (PHP / Ruby / ...)?
- Verwendest du für deine Serveranwendung bestimmte Frameworks?
![](https://images.gutefrage.net/media/default/user/14_nmmslarge.png?v=1551279448000)
ich benutze nur JavaScript, auch in der serveranwendung, welche eigentlich nur eine Sammlung an axios Requests ist.
2 Antworten
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
Zum Empfangen der Daten würde ich auf das formidable-Modul zurückgreifen. Außerdem benötigst du das fs-Modul zum Schreiben der Daten in das Dateisystem. Installiere dir die Module via NPM und binde sie ein:
const formidable = require("formidable");
const fs = require("fs");
Im Anschluss kannst du in deinem POST-Handler für den Upload die Datenverarbeitung formulieren.
const form = new formidable.IncomingForm();
form.parse(request, (error, fields, file) => {
const filepath = file.fileupload.filepath;
const filename = file.fileupload.originalFilename;
// validate and filter filename ...
const destinationPath = `${__basedir}/public/profile-pictures/${filename}`;
fs.rename(filepath, destinationPath, () => {
// some success message (?)
response.end();
});
});
Die Variabe __basedir wird in der app.js definiert.
global.__basedir = __dirname;
Das ist soweit ein Upload ohne Filter. Zumindest für das Produktivsystem solltest du allerdings eine Filterung einbauen, die beispielsweise die Dateigröße und den MIME-Typ beschränkt.
Für deinen Client bräuchtest du nun noch ein Formular mit Upload-Feld. Auf GeeksForGeeks findest du eine Beispielimplementation, die auch Axios nutzt.
Beachte, dass input-Elemente keine Kindelemente aufnehmen können und daher auch keinen extra schließenden Tag haben.
![](https://images.gutefrage.net/media/user/FaTech/1708715131049_nmmslarge__0_0_500_500_77a0f43d5804c908f40c8a1b0c260400.png?v=1708715131000)
Du musst die Datei mit der POST Methode zum Beispiel an dein Backend senden. Dies kannst du mit <form> machen oder mit Ajax
![](https://images.gutefrage.net/media/default/user/14_nmmslarge.png?v=1551279448000)
Klar, aber ich bekomms nicht hin, die Datei nachher zu speichern.