Erstellen Sie ganz einfach einen NodeJS-Server (10): Behandeln Sie hochgeladene images_node.js

In diesem Abschnitt werden wir implementieren, dass der Benutzer ein Bild hochlädt und das Bild im Browser anzeigt.

Das externe Modul, das wir hier verwenden werden, ist das von Felix Geisendörfer entwickelte Node-Formidable-Modul. Es eignet sich gut zum Parsen hochgeladener Dateidaten.

Um dieses externe Modul zu installieren, müssen Sie den Befehl unter cmd ausführen:

Code kopieren Der Code lautet wie folgt:

npm install formidable

Werden ähnliche Informationen ausgegeben, ist die Installation erfolgreich:

Code kopieren Der Code lautet wie folgt:

npm info build Erfolg: formidable@1.0.14

Nachdem die Installation erfolgreich war, können wir die Anforderung verwenden, um sie einzuführen:

Code kopieren Der Code lautet wie folgt:

var formidable = require(“formidable”);

Was dieses Modul hier tut, ist die Konvertierung des über eine HTTP-POST-Anfrage übermittelten Formulars, das in Node.js analysiert werden kann. Wir müssen lediglich ein neues IncomingForm erstellen, das eine abstrakte Darstellung des übermittelten Formulars darstellt. Anschließend können wir es verwenden, um das Anforderungsobjekt zu analysieren und die erforderlichen Datenfelder im Formular abzurufen.

Die Bilddateien des Falles dieses Artikels werden im Ordner /tmp gespeichert.

Lösen wir zunächst ein Problem: Wie werden auf der lokalen Festplatte gespeicherte Dateien im Browser angezeigt?

Wir verwenden das fs-Modul, um Dateien in den Server einzulesen.

Fügen wir einen Anforderungshandler für /showURL hinzu, der direkt fest codiert ist, um den Inhalt der Datei /tmp/test.png im Browser anzuzeigen. Natürlich müssen Sie das Bild zunächst an diesem Ort speichern.

Unser Team wird einige Änderungen an requestHandlers.js vornehmen:

Code kopieren Der Code lautet wie folgt:

var querystring = require("querystring"),
fs = require("fs");
Funktion start(response, postData) {
console.log("Der Anforderungshandler 'start' wurde aufgerufen.");
var body = '' '' ' 'content="text/html; charset=UTF-8" />' '' '' '

' '' '' '

' '' '';
Response.writeHead(200, {"Content-Type": "text/html"});
Response.write(body);
Response.end();
}
Funktion upload(response, postData) {
console.log("Der Anforderungshandler 'upload' wurde aufgerufen.");
Response.writeHead(200, {"Content-Type": "text/plain"});
Response.write("Sie haben den Text gesendet: " querystring.parse(postData).text);
Response.end();
}
Funktion show(response, postData) {
console.log("Der Anforderungshandler 'show' wurde aufgerufen.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(error) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(error „n“);
Response.end();
} sonst {
Response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "binary");
Response.end();
}
});
}
exports.start = start;
exports.upload = hochladen;
exports.show = show;



Wir müssen diesen neuen Anforderungshandler auch zur Routenkarte in index.js hinzufügen:





Code kopieren

Der Code lautet wie folgt:

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

Nach dem Neustart des Servers können Sie das in /tmp/test.png gespeicherte Bild sehen, indem Sie http://localhost:8888/show besuchen.

Okay, das Letzte, was wir wollen, ist:

 Fügen Sie dem /start-Formular ein Datei-Upload-Element hinzu

 Integrieren Sie node-formidable in unseren Upload-Request-Handler zum Speichern hochgeladener Bilder in /tmp/test.png

 Betten Sie das hochgeladene Bild mit /uploadURL

in die HTML-Ausgabe ein

Der erste Punkt ist einfach. Fügen Sie einfach einen Multipart-/Formulardaten-Codierungstyp zum HTML-Formular hinzu, entfernen Sie den vorherigen Textbereich, fügen Sie eine Datei-Upload-Komponente hinzu und ändern Sie die Kopie der Senden-Schaltfläche in „Datei hochladen“. Wie in requestHandler.js unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var querystring = require("querystring"),
fs = require("fs");
Funktion start(response, postData) {
console.log("Der Anforderungshandler 'start' wurde aufgerufen.");
var body = '' '' ' 'content="text/html; charset=UTF-8" />' '' '' '

'method="post">' '' '' '

' '' '';
Response.writeHead(200, {"Content-Type": "text/html"});
Response.write(body);
Response.end();
}
Funktion upload(response, postData) {
console.log("Der Anforderungshandler 'upload' wurde aufgerufen.");
Response.writeHead(200, {"Content-Type": "text/plain"});
Response.write("Sie haben den Text gesendet: " querystring.parse(postData).text);
Response.end();
}
Funktion show(response, postData) {
console.log("Der Anforderungshandler 'show' wurde aufgerufen.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(error) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(error „n“);
Response.end();
} sonst {
Response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "binary");
Response.end();
}
});
}
exports.start = start;
exports.upload = hochladen;
exports.show = show;



Als nächstes müssen wir den zweiten Schritt abschließen: Wir beginnen mit server.js – entfernen Sie die Verarbeitung von postData und request.setEncoding (dieser Teil wird von node-formidable selbst erledigt) und übergeben Sie stattdessen das Anforderungsobjekt an How to Anforderungsrouting:





Code kopieren

Der Code lautet wie folgt:

var http = require("http");

var url = require("url"); Funktion start(route, handle) { Funktion onRequest(Anfrage, Antwort) { var pathname = url.parse(request.url).pathname; console.log("Anfrage für „Pfadname“ erhalten.“); route(Handle, Pfadname, Antwort, Anfrage); }

http.createServer(onRequest).listen(8888);

console.log("Server wurde gestartet.");
}
exports.start = start;



Ändern Sie als Nächstes router.js und übergeben Sie dieses Mal das Anforderungsobjekt:





Code kopieren

Der Code lautet wie folgt:

Funktionsroute(Handle, Pfadname, Antwort, Anfrage) {
console.log("Im Begriff, eine Anfrage für "Pfadname) weiterzuleiten);
if (typeof handle[pathname] === 'function') {
handle[Pfadname](Antwort, Anfrage);
} sonst {
console.log("Kein Anforderungshandler für "Pfadname gefunden);
Response.writeHead(404, {"Content-Type": "text/html"});
Response.write("404 Nicht gefunden");
Response.end();
}
}
exports.route = route;

Jetzt kann das Anfrageobjekt in unserem Upload-Anfrage-Handler verwendet werden. node-formidable kümmert sich um das Speichern der hochgeladenen Datei im lokalen /tmp-Verzeichnis, und wir müssen

Stellen Sie sicher, dass die Datei als /tmp/test.png gespeichert wird.

Als nächstes stellen wir die Vorgänge zum Verarbeiten von Datei-Uploads und zum Umbenennen zusammen, wie in requestHandlers.js unten gezeigt:

Code kopieren Der Code lautet wie folgt:

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");
Funktionsstart (Antwort) {
console.log("Der Anforderungshandler 'start' wurde aufgerufen.");
var body = '' '' '' '' '' '

'method="post">' '' '' '

' '' '';
Response.writeHead(200, {"Content-Type": "text/html"});
Response.write(body);
Response.end();
}
Funktions-Upload (Antwort, Anfrage) {
console.log("Der Anforderungshandler 'upload' wurde aufgerufen.");
var form = new formidable.IncomingForm();
console.log("about to parse");
form.parse(request, function(error, field, files) {
console.log("Analyse abgeschlossen");
fs.renameSync(files.upload.path, "/tmp/test.png");
Response.writeHead(200, {"Content-Type": "text/html"});
Response.write("received image:
");
Response.write("");
Response.end();
});
}
Funktion show(response) {
console.log("Der Anforderungshandler 'show' wurde aufgerufen.");
fs.readFile("/tmp/test.png", "binary", function(error, file) {
if(error) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Response.write(error „n“);
Response.end();
} sonst {
Response.writeHead(200, {"Content-Type": "image/png"});
Response.write(file, "binary");
Response.end();
}
});
}
exports.start = start;
exports.upload = hochladen;
exports.show = show;



Danach ist unser Server fertig.

Während des Hochladens von Bildern können bei einigen Personen die folgenden Probleme auftreten:




Ich vermute, dass die Ursache dieses Problems in der Festplattenpartition liegt. Um dieses Problem zu lösen, müssen Sie den Standard-Zero-Time-Ordnerpfad von Formidable ändern, um sicherzustellen, dass er sich in derselben Festplattenpartition wie das Zielverzeichnis befindet.

Wir finden die Upload-Funktion von requestHandlers.js und nehmen einige Änderungen daran vor:

Code kopieren

Der Code lautet wie folgt:

Funktions-Upload (Antwort, Anfrage) {
console.log("Anforderungshandler 'upload' wurde aufgerufen.");
var form = new formidable.IncomingForm(); console.log("about to parse");

form.uploadDir = "tmp";

form.parse(request, function(error, field, files) {
console.log("Analyse abgeschlossen");
fs.renameSync(files.upload.path, "/tmp/test.png"); Response.writeHead(200, {"Content-Type": "text/html"}); Response.write("received image:
");
Response.write(""); Antwort.end();
});
}


Wir haben den Satz form.uploadDir = „tmp“ hinzugefügt, starten nun den Server neu und führen dann den Upload-Vorgang durch. Das Problem ist perfekt gelöst.