Comment implémenter le téléchargement de fichiers dans nodejs+express

Cet article présente principalement la fonction simple de téléchargement de fichiers à l'aide de nodejs+express. Les amis qui en ont besoin peuvent s'y référer

1 Établir un projet express

express -e nodejs-uploadfile

<.>

2. Téléchargez le middleware multer

npm i multer or yarn multer

3. Référencez multer dans routes/index.js. Puisque les opérations sur les fichiers sont également utilisées, fs doit également être référencé. , et spécifiez le répertoire de téléchargement du fichier

const multer = require('multer');
const fs = require('fs');
const UPLOAD_PATH = './uploads'

Téléchargement de fichier unique : Les fichiers dans index.html sont les suivants (le type du 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>

Ajoutez la route de téléchargement dans routes/index.js pour gérer l'opération de téléchargement de fichiers

router.post('/upload', upload.single('fileUpload'), 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: '上传成功'
  });
 });
 })
})

Si le fichier téléchargé est une image, vous pouvez également utiliser le Objet FileReader pour prévisualiser l'image

(function($){
 $('input').on('change', function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $('img').attr('src', ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))

Téléchargement de fichiers multiples : Le principe du téléchargement de fichiers multiples est le même que celui du téléchargement de fichiers uniques. Le code est le suivant :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

router.post('/upload', upload.array('fileUpload'), 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('成功');
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: '上传成功',
 })
 }).catch(err => {
 res.json({ err })
 });
})

Articles associés :

Comment déterminer si un nom de variable existe dans un tableau en JavaScript

Comment implémenter la fonction de masquage retardé via JS

Comment utiliser Angular pour implémenter la fonction de minuterie

Comment utiliser Angular pour implémenter la fonction d'étiquetage de flèche triangulaire

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!