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
- Womit schreibst du deine Serveranwendung? Auch JavaScript oder mit einer anderen Programmiersprache (PHP / Ruby / ...)?
- Verwendest du für deine Serveranwendung bestimmte Frameworks?
ich benutze nur JavaScript, auch in der serveranwendung, welche eigentlich nur eine Sammlung an axios Requests ist.
2 Antworten
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.
Du musst die Datei mit der POST Methode zum Beispiel an dein Backend senden. Dies kannst du mit <form> machen oder mit Ajax
Klar, aber ich bekomms nicht hin, die Datei nachher zu speichern.