Dans cette section, nous implémenterons le téléchargement de l'utilisateur et afficherons l'image dans le navigateur.
Le module externe que nous souhaitons utiliser ici est le module formable par nœud développé par Felix Geisendörfer. Il fait une bonne abstraction de l'analyse des données de fichiers téléchargées.
Pour installer ce module externe, vous devez exécuter la commande sous CMD:
La copie de code est la suivante:
Installation de NPM formidable
Si vous publiez des informations similaires, cela signifie que l'installation a réussi:
La copie de code est la suivante:
NPM Info Build Succès: [email protected]
Une fois l'installation réussie, nous pouvons utiliser la demande pour l'introduire:
La copie de code est la suivante:
var formidable = require ("formidable");
Ce que fait ce module ici est de résoudre le formulaire soumis via la demande de post HTTP dans Node.js. Tout ce que nous avons à faire est de créer un nouveau formulaire entrant, qui est une représentation abstraite du formulaire soumis. Après cela, nous pouvons l'utiliser pour analyser l'objet de demande et obtenir les champs de données requis dans le formulaire.
Les fichiers d'image dans ce cas sont stockés dans le dossier / tmp.
Résolvons d'abord un problème: comment afficher des fichiers enregistrés sur le disque dur local dans le navigateur?
Nous utilisons le module FS pour lire le fichier sur le serveur.
Ajoutons le gestionnaire de requête / showUrl, qui code en dur le contenu de fichier /tmp/test.png au navigateur. Bien sûr, vous devez d'abord enregistrer l'image sur cet emplacement.
Notre équipe demandeshandlers.js apporte quelques modifications:
La copie de code est la suivante:
var queRyString = require ("QueryString"),
fs = require ("fs");
Fonction start (réponse, postdata) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' +
'<adhead>' +
'<méta http-equiv = "contenu-type"' +
'content = "text / html; charset = utf-8" />' +
'</ head>' +
'<body>' +
'<form action = "/ upload" méthode = "post">' +
'<textarea name = "text" rows = "20" cols = "60"> </ textarea>' +
'<input type = "soumi" value = "soumettre le texte" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction Téléchargement (réponse, postdata) {
Console.log ("Demande Handler 'Upload' a été appelé.");
Response.WriteHead (200, {"Content-Type": "Text / Plain"});
Response.Write ("Vous avez envoyé le texte:" + querystring.parse (postdata) .Text);
réponse.end ();
}
fonction show (réponse, postdata) {
Console.log ("Demande Handler 'Show' a été appelé.");
fs.readfile ("/ tmp / test.png", "binaire", fonction (erreur, fichier) {
if (error) {
Response.WriteHead (500, {"Content-Type": "Text / PLAIN"});
réponse.write (erreur + "/ n");
réponse.end ();
} autre {
Response.WriteHead (200, {"Content-Type": "Image / Png"});
réponse.write (fichier, "binaire");
réponse.end ();
}
});
}
export.start = start;
exports.upload = upload;
export.show = show;
Nous devons également ajouter ce nouveau gestionnaire de demandes à la table de carte d'itinéraire dans index.js:
La copie de code est la suivante:
var server = require ("./ server");
var routeur = require ("./ routeur");
var requestHandlers = require ("./ requestHandlers");
var manche = {}
manipuler ["/"] = requestHandlers.start;
manipuler ["/ start"] = requestHandlers.start;
gérer ["/ upload"] = requestHandlers.upload;
manipuler ["/ show"] = requestHandlers.show;
server.start (router.route, manche);
Après avoir redémarré le serveur, en visitant http: // localhost: 8888 / show, vous pouvez voir l'image enregistrée dans /tmp/test.png.
Ok, à la fin, nous voulons:
Ajouter un élément de téléchargement de fichiers dans le formulaire / Démarrer
Intégrer le nœud formant dans notre gestionnaire de requête de téléchargement pour enregistrer des images téléchargées sur /tmp/test.png
Incorporer l'image téléchargée dans la sortie HTML de / uploadurl
Le premier élément est simple. Il suffit d'ajouter un type de codage multipart / formulaire de données dans le formulaire HTML, de supprimer la zone de texte précédente, d'ajouter un composant de téléchargement de fichiers et de modifier la copie du bouton Soumettre pour "télécharger le fichier". Comme indiqué dans requesthandler.js comme suit:
La copie de code est la suivante:
var queRyString = require ("QueryString"),
fs = require ("fs");
Fonction start (réponse, postdata) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' +
'<adhead>' +
'<méta http-equiv = "contenu-type"' +
'content = "text / html; charset = utf-8" />' +
'</ head>' +
'<body>' +
'<form action = "/ upload" encType = "multipart / form-data"' +
'méthode = "post">' +
'<input type = "file" name = "upload">' +
'<input type = "soumi" value = "télécharger le fichier" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction Téléchargement (réponse, postdata) {
Console.log ("Demande Handler 'Upload' a été appelé.");
Response.WriteHead (200, {"Content-Type": "Text / Plain"});
Response.Write ("Vous avez envoyé le texte:" + querystring.parse (postdata) .Text);
réponse.end ();
}
fonction show (réponse, postdata) {
Console.log ("Demande Handler 'Show' a été appelé.");
fs.readfile ("/ tmp / test.png", "binaire", fonction (erreur, fichier) {
if (error) {
Response.WriteHead (500, {"Content-Type": "Text / PLAIN"});
réponse.write (erreur + "/ n");
réponse.end ();
} autre {
Response.WriteHead (200, {"Content-Type": "Image / Png"});
réponse.write (fichier, "binaire");
réponse.end ();
}
});
}
export.start = start;
exports.upload = upload;
export.show = show;
Ensuite, nous devons terminer la deuxième étape. Nous commençons par server.js - supprimez le traitement de Postdata et de la demande.SetEncoding (cette partie de la forme de nœud le gérera elle-même), et passez à la place l'objet de demande à l'itinéraire de demande:
La copie de code est la suivante:
var http = require ("http");
var url = require ("url");
Fonction Start (route, manche) {
fonction onRequest (demande, réponse) {
var pathname = url.parse (request.url) .pathname;
console.log ("Demande pour" + pathname + "reçu.");
Route (manche, cheminement, réponse, demande);
}
http.createServer (onRequest) .Listen (8888);
console.log ("Server a commencé.");
}
export.start = start;
Ensuite, modifiez Router.js, et cette fois, vous devez passer l'objet de demande:
La copie de code est la suivante:
Route de fonction (manche, cheminement, réponse, demande) {
console.log ("sur le point d'acheter une demande pour" + pathname);
if (typeof handle [pathname] === 'function') {
manipuler [pathname] (réponse, demande);
} autre {
console.log ("Aucun gestionnaire de demande trouvé pour" + pathName);
Response.WriteHead (404, {"Content-Type": "Text / Html"});
Response.Write ("404 non trouvé");
réponse.end ();
}
}
export.Route = Route;
Maintenant, l'objet de demande peut être utilisé dans notre gestionnaire de demande de téléchargement. Nœud-formmidable gérera la sauvegarde du fichier téléchargé dans le répertoire local / TMP, et nous avons besoin
Ce que vous voulez faire est de vous assurer que le fichier est enregistré comme /tmp/test.png.
Ensuite, nous avons mis en place les opérations du traitement du fichier de téléchargement et de renommage, comme indiqué dans requestHandlers.js:
La copie de code est la suivante:
var queRyString = require ("QueryString"),
fs = require ("fs"),
formidable = require ("formidable");
fonction start (réponse) {
Console.log ("Demande Handler 'Start' a été appelé.");
var body = '<html>' +
'<adhead>' +
'<meta http-equiv = "contenu-type" content = "text / html;' +
'charset = utf-8 "/>' +
'</ head>' +
'<body>' +
'<form action = "/ upload" encType = "multipart / form-data"' +
'méthode = "post">' +
'<input type = "file" name = "upload" multiple = "multiple">' +
'<input type = "soumi" value = "télécharger le fichier" />' +
'</form>' +
'</body>' +
'</html>';
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write (corps);
réponse.end ();
}
Fonction Téléchargement (réponse, demande) {
Console.log ("Demande Handler 'Upload' a été appelé.");
var form = new formidable.incomingform ();
console.log ("sur le point d'analyser");
Form.Parse (demande, fonction (erreur, champs, fichiers) {
Console.log ("analyse de l'anneau");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write ("Image reçue: <br/>");
réponse.write ("<img src = '/ show' />");
réponse.end ();
});
}
fonction show (réponse) {
Console.log ("Demande Handler 'Show' a été appelé.");
fs.readfile ("/ tmp / test.png", "binaire", fonction (erreur, fichier) {
if (error) {
Response.WriteHead (500, {"Content-Type": "Text / PLAIN"});
réponse.write (erreur + "/ n");
réponse.end ();
} autre {
Response.WriteHead (200, {"Content-Type": "Image / Png"});
réponse.write (fichier, "binaire");
réponse.end ();
}
});
}
export.start = start;
exports.upload = upload;
export.show = show;
Ce faisant, nos serveurs sont tous terminés.
Pendant le processus de téléchargement d'images, certaines personnes peuvent rencontrer de tels problèmes:
Je suppose que la raison de ce problème est causée par la partition de disque. Pour résoudre ce problème, vous devez modifier le chemin de dossier zéro par défaut de formidable pour vous assurer qu'il se trouve sur la même partition de disque que le répertoire cible.
Nous avons trouvé la fonction de téléchargement de requestHandlers.js et y avons apporté quelques modifications:
La copie de code est la suivante:
Fonction Téléchargement (réponse, demande) {
Console.log ("Demande Handler 'Upload' a été appelé.");
var form = new formidable.incomingform ();
console.log ("sur le point d'analyser");
form.uploaddir = "tmp";
Form.Parse (demande, fonction (erreur, champs, fichiers) {
Console.log ("analyse de l'anneau");
fs.renamesync (files.upload.path, "/tmp/test.png");
Response.WriteHead (200, {"Content-Type": "Text / Html"});
Response.Write ("Image reçue: <br/>");
réponse.write ("<img src = '/ show' />");
réponse.end ();
});
}
Nous avons ajouté un formulaire de phrase.uploaddir = "tmp". Redémarrez maintenant le serveur, puis effectuez l'opération de téléchargement. Le problème est parfaitement résolu.