Explication détaillée de l'utilisation de nodejs+express pour implémenter une fonction de téléchargement de fichiers simple-js tutoriel-php.cn

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

2491 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!