Créez facilement un serveur nodejs (10) : gérez les images_node.js téléchargées

Dans cette section, nous implémenterons que l'utilisateur télécharge une image et affiche l'image dans le navigateur.

Le module externe que nous allons utiliser ici est le module formidable de nœud développé par Felix Geisendörfer. Cela constitue une bonne abstraction pour analyser les données des fichiers téléchargés.

Pour installer ce module externe, vous devez exécuter la commande sous cmd :

Copier le code Le code est le suivant :

npm install formidable

Si des informations similaires s'affichent, l'installation est réussie :

Copier le code Le code est le suivant :

npm info build Succès : formidable@1.0.14

Une fois l'installation réussie, nous pouvons utiliser la requête pour la présenter :

Copier le code Le code est le suivant :

var formidable = require("formidable");

Ce module fait ici, c'est convertir le formulaire soumis via une requête HTTP POST, qui peut être analysé dans Node.js. Tout ce que nous avons à faire est de créer un nouveau IncomingForm, qui est une représentation abstraite du formulaire soumis. Après cela, nous pouvons l'utiliser pour analyser l'objet de la requête et obtenir les champs de données requis dans le formulaire.

Les fichiers image du cas de cet article sont stockés dans le dossier /tmp.

Résolvons d'abord un problème : Comment afficher les fichiers enregistrés sur le disque dur local dans le navigateur ?

Nous utilisons le module fs pour lire les fichiers sur le serveur.

Ajoutons un gestionnaire de requêtes pour /showURL, qui est directement codé en dur pour afficher le contenu du fichier /tmp/test.png au navigateur. Bien entendu, vous devez d’abord enregistrer l’image à cet emplacement.

Notre équipe apportera quelques modifications à requestHandlers.js :

Copier le code Le code est le suivant :

var querystring = require("querystring"),
fs = require("fs");
function start (réponse, postData) {
console.log("Le gestionnaire de requêtes 'start' a été appelé.");
var corps = ''
''
' 'content="text/html; charset=UTF-8" />
''
''
'

'
'
''
''
'';
réponse.writeHead(200, {"Content-Type": "text/html"});
réponse.write(body);
réponse.end();
>
fonction télécharger (réponse, postData) {
console.log("Le gestionnaire de requêtes 'upload' a été appelé.");
réponse.writeHead(200, {"Content-Type": "text/plain"});
réponse.write("Vous avez envoyé le texte : " querystring.parse(postData).text);
réponse.end();
>
fonction show (réponse, postData) {
console.log("Le gestionnaire de requêtes 'show' a été appelé.");
fs.readFile("/tmp/test.png", "binaire", fonction (erreur, fichier) {
si (erreur) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Réponse.write(erreur "n");
réponse.end();
} autre {
réponse.writeHead(200, {"Content-Type": "image/png"});
Response.write(fichier, "binaire");
réponse.end();
>
});
>
exports.start = start;
exports.upload = télécharger;
exports.show = show;

Nous devons également ajouter ce nouveau gestionnaire de requêtes à la feuille de route dans index.js :

Copier le code Le code est le suivant :

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

Après avoir redémarré le serveur, vous pouvez voir l'image enregistrée dans /tmp/test.png en visitant http://localhost:8888/show.

D'accord, la dernière chose que nous voulons, c'est :

 Ajoutez un élément de téléchargement de fichier au formulaire /start

 Intégrez node-formidable dans notre gestionnaire de demande de téléchargement pour enregistrer les images téléchargées dans /tmp/test.png

 Intégrez l'image téléchargée dans la sortie HTML par /uploadURL

Le premier élément est simple. Ajoutez simplement un type d'encodage multipart/form-data au formulaire HTML, supprimez la zone de texte précédente, ajoutez un composant de téléchargement de fichier et modifiez la copie du bouton de soumission en "Télécharger le fichier". Comme indiqué dans requestHandler.js ci-dessous :

Copier le code Le code est le suivant :

var querystring = require("querystring"),
fs = require("fs");
function start (réponse, postData) {
console.log("Le gestionnaire de requêtes 'start' a été appelé.");
var corps = ''
''
' 'content="text/html; charset=UTF-8" />
''
''
' 'méthode="post">'
'
'
''
''
'';
réponse.writeHead(200, {"Content-Type": "text/html"});
réponse.write(body);
réponse.end();
>
fonction télécharger (réponse, postData) {
console.log("Le gestionnaire de requêtes 'upload' a été appelé.");
réponse.writeHead(200, {"Content-Type": "text/plain"});
réponse.write("Vous avez envoyé le texte : " querystring.parse(postData).text);
réponse.end();
>
fonction show (réponse, postData) {
console.log("Le gestionnaire de requêtes 'show' a été appelé.");
fs.readFile("/tmp/test.png", "binaire", fonction (erreur, fichier) {
si (erreur) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Réponse.write(erreur "n");
réponse.end();
} autre {
réponse.writeHead(200, {"Content-Type": "image/png"});
Response.write(fichier, "binaire");
réponse.end();
>
});
>
exports.start = start;
exports.upload = télécharger;
exports.show = show;

Ensuite, nous devons terminer la deuxième étape. Nous commençons par server.js - supprimons le traitement de postData et request.setEncoding (cette partie node-formidable le gérera lui-même), et passons à la place l'objet de requête à How to. routage des requêtes :

Copier le code Le code est le suivant :

var http = require("http");
var url = require("url");
fonction start(route, handle) {
function onRequest (demande, réponse) {
var chemin d'accès = url.parse(request.url).chemin d'accès;
console.log("Demande de " chemin d'accès " reçue.");
route(handle, chemin, réponse, requête);
>
http.createServer(onRequest).listen(8888);
console.log("Le serveur a démarré.");
>
exports.start = start;

Ensuite, modifiez router.js, en passant cette fois l'objet de requête :

Copier le code Le code est le suivant :

function route (handle, chemin, réponse, requête) {
console.log("Sur le point d'acheminer une requête pour " pathname);
if (typeof handle[pathname] === 'function') {
handle[pathname](réponse, requête);
} autre {
console.log("Aucun gestionnaire de requêtes trouvé pour " pathname);
réponse.writeHead(404, {"Content-Type": "text/html"});
réponse.write("404 Non trouvé");
réponse.end();
>
>
exports.route = route;

L'objet de requête peut désormais être utilisé dans notre gestionnaire de requêtes de téléchargement. node-formidable se chargera de sauvegarder le fichier téléchargé dans le répertoire local /tmp, et nous devons

Ce qu'il faut faire est de s'assurer que le fichier est enregistré sous /tmp/test.png.

Ensuite, nous avons rassemblé les opérations de traitement des téléchargements de fichiers et de renommage, comme indiqué dans requestHandlers.js ci-dessous :

Copier le code Le code est le suivant :

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");
fonction start(réponse) {
console.log("Le gestionnaire de requêtes 'start' a été appelé.");
var corps = ''
''
'
''
''
' 'méthode="post">'
'
'
''
''
'';
réponse.writeHead(200, {"Content-Type": "text/html"});
réponse.write(body);
réponse.end();
>
fonction upload(réponse, demande) {
console.log("Le gestionnaire de requêtes 'upload' a été appelé.");
var form = new formidable.IncomingForm();
console.log("sur le point d'analyser");
form.parse(requête, fonction(erreur, champs, fichiers) {
console.log("analyse effectuée");
fs.renameSync(files.upload.path, "/tmp/test.png");
réponse.writeHead(200, {"Content-Type": "text/html"});
réponse.write("image reçue :
");
réponse.write("");
réponse.end();
});
>
fonction show (réponse) {
console.log("Le gestionnaire de requêtes 'show' a été appelé.");
fs.readFile("/tmp/test.png", "binaire", fonction (erreur, fichier) {
si (erreur) {
Response.writeHead(500, {"Content-Type": "text/plain"});
Réponse.write(erreur "n");
réponse.end();
} autre {
réponse.writeHead(200, {"Content-Type": "image/png"});
Response.write(fichier, "binaire");
réponse.end();
>
});
>
exports.start = start;
exports.upload = télécharger;
exports.show = show;

Après cela, notre serveur est complet.

Pendant le processus de téléchargement d'images, certaines personnes peuvent rencontrer les problèmes suivants :

Je suppose que la cause de ce problème est due à la partition de disque. Pour résoudre ce problème, vous devez modifier le chemin du dossier à temps zéro par défaut de formidable pour vous assurer qu'il se trouve dans la même partition de disque que le répertoire cible.

Nous retrouvons la fonction de téléchargement de requestHandlers.js et y apportons quelques modifications :

Copier le code Le code est le suivant :

function upload(réponse, demande) {
console.log("Le gestionnaire de requête 'upload' a été appelé.");
var form = new formidable.IncomingForm();
console.log("sur le point d'analyser");

form.uploadDir = "tmp";

form.parse(requête, fonction(erreur, champs, fichiers) {
console.log("analyse terminée");
fs.renameSync(files.upload.path, "/tmp/test.png");
réponse.writeHead(200, {"Content-Type": "text/html"}); réponse.write("image reçue :
");
réponse.write(""); réponse.end();
});
>


Nous avons ajouté la phrase form.uploadDir = « tmp », redémarrez maintenant le serveur, puis effectuez l'opération de téléchargement, le problème est parfaitement résolu.