Node.js - Dateien hochladen: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftiger Codingsuperstar! Willkommen auf unserer aufregenden Reise in die Welt des Dateihochladens mit Node.js. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich durch dieses Abenteuer zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir fangen von vorne an und bauen unseren Weg nach oben. Am Ende dieses Tutorials wirst du Dateien wie ein Profi hochladen können!

Einführung in das Dateihochladen in Node.js

Bevor wir ins Detail gehen, lassen wir uns darüber unterhalten, warum das Hochladen von Dateien wichtig ist. Stell dir vor, du erstellst eine Social-Media-App, in der Benutzer Fotos teilen können. Oder vielleicht baust du ein Dokumentenmanagementsystem für ein Unternehmen. In beiden Fällen brauchst du eine Möglichkeit, Dateien von den Benutzern an deinen Server zu senden. Genau hier kommt das Dateihochladen ins Spiel!

Node.js, unser zuverlässiger JavaScript-Laufzeitumgebung, bietet mehrere Möglichkeiten, Datei-Uploads zu verwalten. Heute werden wir uns auf zwei beliebte Bibliotheken konzentrieren: Formidable und Multer. Denke daran, dass diese wie deine Datei-Upload-Superhelden sind, jeder mit seinen eigenen Superkräften!

Formidable: Dein erster Datei-Upload-Helfer

Was ist Formidable?

Formidable ist wie der zuverlässige Freund, der immer da ist, um zu helfen. Es ist ein Node.js-Modul, das das Parsen von Formulardaten, insbesondere Datei-Uploads, zum Kinderspiel macht. Lass uns sehen, wie man es verwendet!

Einrichtung von Formidable

Zuerst müssen wir Formidable installieren. Öffne dein Terminal und gebe folgendes ein:

npm install formidable

Dieser Befehl ist wie der Gang zum Superheldenladen und das Auswählen deines Formidable-Kostüms. Jetzt bist du bereit zum Hochladen!

Grundlegender Datei-Upload mit Formidable

Lass uns einen einfachen Server erstellen, der Datei-Uploads verarbeiten kann. Hier ist der Code:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('Datei hochgeladen und verschoben!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Lass uns das herunterbrechen:

1. Wir erstellen einen Server mit http.createServer().
2. Wenn die URL '/fileupload' ist, verwenden wir Formidable, um das eingehende Formular zu analysieren.
3. Wir verschieben die hochgeladene Datei von ihrem temporären Ort an einen dauerhaften Ort.
4. Wenn die URL etwas anderes ist, zeigen wir ein einfaches Upload-Formular an.

Handling Multiple File Uploads

Was ist, wenn du gleichzeitig mehrere Dateien hochladen möchtest? Kein Problem! Hier ist, wie du den Code anpassen kannst:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Dateien hochgeladen und verschoben!');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

Die wichtigsten Änderungen hier sind:

1. Wir setzen form.multiples = true, um mehrere Datei-Uploads zu ermöglichen.
2. Wir überprüfen, ob files.filetoupload ein Array (mehrere Dateien) oder ein Objekt (eine Datei) ist.
3. Wir verwenden forEach, um mehrere Dateien zu behandeln, falls nötig.

Multer: Der Neue im Block

Einführung in Multer

Nun, lassen wir uns unserem zweiten Datei-Upload-Superhelden vorstellen: Multer. Multer ist wie Formidables cooler, jüngerer Bruder. Es ist speziell für die Verwaltung von multipart/form-data konzipiert, was perfekt für Datei-Uploads ist.

Einrichtung von Multer

Um mit Multer zu beginnen, installiere es mit npm:

npm install multer

Grundlegender Datei-Upload mit Multer

Hier ist ein einfaches Beispiel, wie man Multer verwendet:

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

const upload = multer({ storage: storage });

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Bitte lade eine Datei hoch');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Server gestartet auf Port 3000'));

Lass uns das herunterbrechen:

1. Wir richten eine Speicherengine ein, die Multer anzeigt, wo die Dateien gespeichert werden sollen und wie sie benannt werden sollen.
2. Wir erstellen ein Upload-Objekt mit unseren Speicher-Einstellungen.
3. Wir definieren eine Route für das Upload-Formular und eine andere für die Datei-Upload-Verarbeitung.
4. In der Upload-Routine verwenden wir upload.single('filetoupload'), um einen einzelnen Datei-Upload zu verarbeiten.

Handling Multiple File Uploads with Multer

Multer macht es super einfach, mehrere Datei-Uploads zu verwalten. Hier ist wie:

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Bitte wähle Dateien aus');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

Die wichtigste Änderung hier ist die Verwendung von upload.array('filetoupload', 12) anstelle von upload.single(). Die '12' gibt die maximale Anzahl von Dateien an.

Comparing Formidable and Multer

Jetzt, da wir beide Formidable und Multer in Aktion gesehen haben, lassen uns sie vergleichen:

Funktion	Formidable	Multer
Benutzerfreundlichkeit	Einfach und unkompliziert	Erfordert mehr Einrichtung, bietet aber mehr Kontrolle
Integration	Funktioniert mit jedem Node.js-Server	Entworfen, um mit Express zu arbeiten
Dateiverarbeitung	Kann Dateien und Felder verwalten	Speziell für Datei-Uploads konzipiert
Anpassungsfähigkeit	Weniger flexibel	Hochgradig anpassungsfähig
Mehrfache Datei-Uploads	Erfordert zusätzlichen Code	Eingebaute Unterstützung

Schlussfolgerung

Glückwunsch! Du hast deine Node.js-Fähigkeiten durch das Lernen des Datei-Uploads aufgestockt. Egal, ob du Formidable wegen seiner Einfachheit oder Multer wegen seiner Leistungsfähigkeit und Flexibilität wählst, du bist jetzt in der Lage, Datei-Upload-Funktionalität in deine Node.js-Anwendungen hinzuzufügen.

Denke daran, Übung macht den Meister. Versuche, ein kleines Projekt zu erstellen, das Datei-Uploads verwendet – vielleicht eine einfache Bild-Sharing-App oder ein Dokumentenarchivsystem. Je mehr du codierst, desto wohler wirst du mit diesen Konzepten werden.

Frohes Coden und möge deine Uploads stets erfolgreich sein!

Credits: Image by storyset