Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'utilisation de nodejs+express pour implémenter une fonction de téléchargement de fichiers simple

小云云
Libérer: 2017-12-27 14:03:25
original
2482 Les gens l'ont consulté

Cet article présente principalement la fonction simple de téléchargement de fichiers utilisant nodejs+express. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Créer un projet express


express -e nodejs-uploadfile
Copier après la connexion

2. Télécharger le middleware Multer


npm i multer or yarn multer
Copier après la connexion

3. Référencez multer dans routes/index.js Puisque les opérations sur les fichiers sont également utilisées, vous devez également référencer le module fs et spécifier le répertoire de téléchargement de fichiers< 🎜. >


const multer = require(&#39;multer&#39;);
const fs = require(&#39;fs&#39;);
const UPLOAD_PATH = &#39;./uploads&#39;
Copier après la connexion
Téléchargement de fichier unique : les fichiers dans index.html sont les suivants (le type de fichier de formulaire doit être enctype="multipart/form-data") ,


<form action="/upload" method="post" enctype="multipart/form-data">
 <input name="fileUpload" type="file" />
 <img src="" alt="">
 <button type="submit">上传</button>
</form>
Copier après la connexion
Ajouter la route de téléchargement dans routes/index.js pour gérer l'opération de téléchargement de fichiers


router.post(&#39;/upload&#39;, upload.single(&#39;fileUpload&#39;), function (req, res, next) {
 const { file } = req;
 fs.readFile(file.path, function(err, data) {
 fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
  if (err) res.json({ err })
  res.json({
  msg: &#39;上传成功&#39;
  });
 });
 })
})
Copier après la connexion
Si le fichier téléchargé est une image, vous pouvez également utiliser l'objet FileReader pour prévisualiser l'image


(function($){
 $(&#39;input&#39;).on(&#39;change&#39;, function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $(&#39;img&#39;).attr(&#39;src&#39;, ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))
Copier après la connexion
Téléchargement de fichiers multiples : Le principe du multi- téléchargement de fichiers et principe du téléchargement de fichiers uniques Idem, le code est le suivant :


router.post(&#39;/upload&#39;, upload.array(&#39;fileUpload&#39;), function (req, res, next) {
 const files = req.files;
 const response = [];
 const result = new Promise((resolve, reject) => {
 files.map((v) => {
  fs.readFile(v.path, function(err, data) {
  fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {
   const result = {
   file: v,
   }
   if (err) reject(err);
   resolve(&#39;成功&#39;);
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: &#39;上传成功&#39;,
 })
 }).catch(err => {
 res.json({ err })
 });
})
Copier après la connexion
Le code associé se trouve sur github.com/bWhirring/n…

Recommandations associées :


Explication détaillée d'Ajax et de node.js multer pour implémenter la fonction de téléchargement de fichiers

Un exemple de fichier thinkjs fonction de téléchargement

jQuery pour implémenter la fonction d'aperçu du fichier image avant le téléchargement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!