In diesem Abschnitt werden der Benutzer das Bild hochladen und das Bild im Browser anzeigen.
Das externe Modul, das wir hier verwenden möchten, ist das von Felix Geisendörfer entwickelte Knotenbildmodul. Es macht eine gute Abstraktion der analysierten hochgeladenen Dateidaten.
Um dieses externe Modul zu installieren, müssen Sie den Befehl unter CMD ausführen:
Die Codekopie lautet wie folgt:
NPM fantastisch installieren
Wenn Sie ähnliche Informationen ausgeben, bedeutet dies, dass die Installation erfolgreich war:
Die Codekopie lautet wie folgt:
NPM -Info Erstellung Erfolg: [email protected]
Nachdem die Installation erfolgreich ist, können wir die Anfrage verwenden, um sie vorzustellen:
Die Codekopie lautet wie folgt:
var formidable = required ("formidable");
Was dieses Modul hier tut, soll das über HTTP -Postanforderung eingereichte Formular in node.js. Alles, was wir tun müssen, ist eine neue Eingangsform zu erstellen, die eine abstrakte Darstellung des eingereichten Formulars darstellt. Danach können wir es verwenden, um das Anforderungsobjekt zu analysieren und die erforderlichen Datenfelder im Formular zu erhalten.
Die Bilddateien in diesem Fall werden im Ordner /tmp gespeichert.
Lassen Sie uns zunächst ein Problem lösen: Wie können wir Dateien anzeigen, die auf der lokalen Festplatte im Browser gespeichert sind?
Wir verwenden das FS -Modul, um die Datei auf dem Server zu lesen.
Fügen wir den Inhalt der Datei /tmp/test.png zum Browser hinzu, der den Inhalt der Datei /tmp/test.png hardcodiert. Natürlich müssen Sie zuerst das Bild an diesem Ort speichern.
Unser Team RequestHandlers.js enthält einige Änderungen:
Die Codekopie lautet wie folgt:
var queryString = Request ("QueryString"),
fs = erfordern ("fs");
Funktionsstart (Antwort, Postdata) {
console.log ("Anfragenhandler" Start "wurde genannt.");
var body = '<html>'+
'<kopf>'+
'<meta http-äquiv = "content-type"'+
'content = "text /html; charSet = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/Upload" method = "post">'+
'<textArea name = "text" rows = "20" cols = "60"> </textArea>'+
'<input type = "value =" text " />'+ reichen
'</form>'+
'</body>'+
'</html>';
Antwort.WriteHead (200, {"Content-Type": "text/html"});
Antwort.Write (Körper);
Antwort.end ();
}
Funktion hochladen (Antwort, Postdata) {
console.log ("Anfrage -Handler" Upload "wurde genannt.");
response.writeHead (200, {"Content-Type": "Text/Plain"});
Antwort.Write ("Sie haben den Text gesendet:"+ queryString.parse (Postdata) .Text);
Antwort.end ();
}
Funktionshow (Antwort, Postdata) {
console.log ("Anfrage Handler" Show "wurde genannt.");
fs.ReadFile ("/tmp/test.png", "binär", Funktion (Fehler, Datei) {
if (Fehler) {
Antwort.WriteHead (500, {"Inhaltstyp": "text/plain"});
Antwort.Write (Fehler + "/n");
Antwort.end ();
} anders {
response.writeHead (200, {"Content-Type": "Image/png"});
Antwort.Write (Datei, "binär");
Antwort.end ();
}
});
}
exports.Start = start;
exports.Upload = Upload;
exports.show = show;
Wir müssen diesen neuen Anfrage -Handler auch zur Routenkarte in Index.js hinzufügen:
Die Codekopie lautet wie folgt:
var Server = Request ("./ Server");
var router = required ("./router");
var RequestHandlers = Request ("./ 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, indem Sie http: // localhost: 8888/show besuchen, sehen Sie das Bild in /tmp/test.png.
OK, am Ende wollen wir:
Fügen Sie ein Datei -Upload -Element in das Formular /Start hinzu
Integrieren
Einbetten Sie das hochgeladene Bild in die HTML -Ausgabe von /uploadurl ein
Der erste Artikel ist einfach. Fügen Sie einfach einen Multipart/Form-Data-Codierungstyp im HTML-Formular hinzu, entfernen Sie den vorherigen Textbereich, fügen Sie eine Datei-Upload-Komponente hinzu und ändern Sie die Kopie der Schaltfläche "Senden" in "Datei hochladen". Wie in RequestHandler.js wie folgt gezeigt:
Die Codekopie lautet wie folgt:
var queryString = Request ("QueryString"),
fs = erfordern ("fs");
Funktionsstart (Antwort, Postdata) {
console.log ("Anfragenhandler" Start "wurde genannt.");
var body = '<html>'+
'<kopf>'+
'<meta http-äquiv = "content-type"'+
'content = "text /html; charSet = utf-8" />'+
'</head>'+
'<body>'+
'<form action = "/upload" engType = "MultiPart/Form-Data"'+
'method = "post">'+
'<input type = "Datei" name = "hochladen">'+
'<input type = "surug" value = "Datei hochladen" />'+
'</form>'+
'</body>'+
'</html>';
Antwort.WriteHead (200, {"Content-Type": "text/html"});
Antwort.Write (Körper);
Antwort.end ();
}
Funktion hochladen (Antwort, Postdata) {
console.log ("Anfrage -Handler" Upload "wurde genannt.");
response.writeHead (200, {"Content-Type": "Text/Plain"});
Antwort.Write ("Sie haben den Text gesendet:"+ queryString.parse (Postdata) .Text);
Antwort.end ();
}
Funktionshow (Antwort, Postdata) {
console.log ("Anfrage Handler" Show "wurde genannt.");
fs.ReadFile ("/tmp/test.png", "binär", Funktion (Fehler, Datei) {
if (Fehler) {
Antwort.WriteHead (500, {"Inhaltstyp": "text/plain"});
Antwort.Write (Fehler + "/n");
Antwort.end ();
} anders {
response.writeHead (200, {"Content-Type": "Image/png"});
Antwort.Write (Datei, "binär");
Antwort.end ();
}
});
}
exports.Start = start;
exports.Upload = Upload;
exports.show = show;
Als nächstes müssen wir den zweiten Schritt ausfüllen. Wir beginnen mit server.js - Entfernen Sie die Verarbeitung von Postdata und Request.SetEnCoding (Dieser Teil von Knotenformidable wird sie selbst verarbeiten) und übergeben stattdessen das Anforderungsobjekt an die Anforderungsroute:
Die Codekopie lautet wie folgt:
var http = required ("http");
var url = erfordern ("url");
Funktionsstart (Route, Handle) {
Funktion OnRequest (Anfrage, Antwort) {
var pathname = url.parse (request.url) .PathName;
console.log ("Anfrage für" + pathname + "empfangen.");
Route (Handle, Pfadname, Antwort, Anfrage);
}
http.createServer (OnRequest) .Listen (8888);
console.log ("Server hat begonnen.");
}
exports.Start = start;
Ändern Sie als nächstes Router.js, und diesmal müssen Sie das Anforderungsobjekt übergeben:
Die Codekopie lautet wie folgt:
Funktionsstrecke (Handle, Pfadname, Antwort, Anfrage) {
console.log ("kurz davor, eine Anfrage nach" + pathname) zu leiten);
if (typeof handle [pathName] === 'Funktion') {
[pathname] (Antwort, Anfrage) handeln;
} anders {
console.log ("Kein Anfrage -Handler für" + pathname);
Antwort.WriteHead (404, {"Inhaltstyp": "text/html"});
Antwort.Write ("404 nicht gefunden");
Antwort.end ();
}
}
Exports.Route = Route;
Jetzt kann das Anforderungsobjekt in unserem Upload -Anforderungshandler verwendet werden. Durch die Knotenformierung wird das Speichern der hochgeladenen Datei im lokalen /TMP-Verzeichnis verarbeitet, und wir benötigen
Sie möchten sicherstellen, dass die Datei als /tmp/test.png gespeichert wird.
Als nächstes setzen wir die Vorgänge des Uploads und Umbenennens von Verarbeitungsdateien zusammen, wie in RequestHandlers.js gezeigt:
Die Codekopie lautet wie folgt:
var queryString = Request ("QueryString"),
fs = erfordern ("fs"),
faszinierbar = require ("formidable");
Funktion start (Antwort) {
console.log ("Anfragenhandler" Start "wurde genannt.");
var body = '<html>'+
'<kopf>'+
'<meta http-äquiv = "content-type" content = "text/html;'+
'charSet = utf-8 " />'+
'</head>'+
'<body>'+
'<form action = "/upload" engType = "MultiPart/Form-Data"'+
'method = "post">'+
'<Eingabe type = "Datei" name = "hochladen" multiple = "multiple">'+
'<input type = "surug" value = "Datei hochladen" />'+
'</form>'+
'</body>'+
'</html>';
Antwort.WriteHead (200, {"Content-Type": "text/html"});
Antwort.Write (Körper);
Antwort.end ();
}
Funktion hochladen (Antwort, Anfrage) {
console.log ("Anfrage -Handler" Upload "wurde genannt.");
var form = new formidable.incomingForm ();
console.log ("kurz zu analysieren");
Form.Parse (Anfrage, Funktion (Fehler, Felder, Dateien) {
console.log ("Parsing erledigt");
fs.renamesync (Dateien.Upload.Path, "/tmp/test.png");
Antwort.WriteHead (200, {"Content-Type": "text/html"});
response.write ("empfangenes Bild: <br/>");
Antwort.Write ("<img Src = ' /show' />");
Antwort.end ();
});
}
Funktionshow (Antwort) {
console.log ("Anfrage Handler" Show "wurde genannt.");
fs.ReadFile ("/tmp/test.png", "binär", Funktion (Fehler, Datei) {
if (Fehler) {
Antwort.WriteHead (500, {"Inhaltstyp": "text/plain"});
Antwort.Write (Fehler + "/n");
Antwort.end ();
} anders {
response.writeHead (200, {"Content-Type": "Image/png"});
Antwort.Write (Datei, "binär");
Antwort.end ();
}
});
}
exports.Start = start;
exports.Upload = Upload;
exports.show = show;
Auf diese Weise sind unsere Server alle abgeschlossen.
Während des Hochladens von Bildern können einige Menschen solche Probleme stoßen:
Ich denke, der Grund für dieses Problem wird durch die Festplattenpartition verursacht. Um dieses Problem zu lösen, müssen Sie den Standard-Null-Zeit-Ordner-Pfad von Formalable ändern, um sicherzustellen, dass es sich auf derselben Festplattenpartition wie das Zielverzeichnis befindet.
Wir haben die Upload -Funktion von RequestHandlers.js gefunden und einige Änderungen vorgenommen:
Die Codekopie lautet wie folgt:
Funktion hochladen (Antwort, Anfrage) {
console.log ("Anfrage -Handler" Upload "wurde genannt.");
var form = new formidable.incomingForm ();
console.log ("kurz zu analysieren");
Form.Uploaddir = "TMP";
Form.Parse (Anfrage, Funktion (Fehler, Felder, Dateien) {
console.log ("Parsing erledigt");
fs.renamesync (Dateien.Upload.Path, "/tmp/test.png");
Antwort.WriteHead (200, {"Content-Type": "text/html"});
response.write ("empfangenes Bild: <br/>");
Antwort.Write ("<img Src = ' /show' />");
Antwort.end ();
});
}
Wir haben ein Satzformular hinzugefügt.Uploaddir = "TMP". Starten Sie nun den Server neu und führen Sie dann den Upload -Vorgang durch. Das Problem ist perfekt gelöst.