Maison > interface Web > tutoriel CSS > Téléchargement de fichiers avec Multer dans Node.js et Express

Téléchargement de fichiers avec Multer dans Node.js et Express

Christopher Nolan
Libérer: 2025-03-02 09:15:14
original
316 Les gens l'ont consulté

Ce tutoriel vous guide dans la création d'un système de téléchargement de fichiers à l'aide de Node.js, Express et Multer. Nous couvrirons les téléchargements de fichiers uniques et multiples, et nous ferons même de la démonstration de stockage d'images dans une base de données MongoDB pour une récupération ultérieure.

Tout d'abord, configurez votre projet:

mkdir upload-express
cd upload-express
npm init -y
npm install express multer mongodb file-system --save
touch server.js
mkdir uploads
Copier après la connexion

Ensuite, créez votre fichier server.js. Cela gérera les téléchargements de fichiers et la logique du serveur. Initialement, nous créerons une application Express de base:

const express = require('express');
const multer = require('multer');
const app = express();

app.get('/', (req, res) => {
  res.json({ message: 'WELCOME' });
});

app.listen(3000, () => console.log('Server started on port 3000'));
Copier après la connexion

Maintenant, configurons Multer pour gérer les téléchargements de fichiers sur disque:

//server.js (add this to your existing server.js)

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

var upload = multer({ storage: storage });
Copier après la connexion

Gestion des téléchargements de fichiers

Téléchargement de fichiers unique

Créez un point de terminaison pour gérer les téléchargements de fichiers uniques. N'oubliez pas de créer un <form></form> correspondant avec une entrée de fichier dans votre index.html (non illustré ici, mais devrait utiliser une demande de post à /uploadfile).

//server.js (add this to your existing server.js)

app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
  const file = req.file;
  if (!file) {
    const error = new Error('Please upload a file');
    error.httpStatusCode = 400;
    return next(error);
  }
  res.send(file);
});
Copier après la connexion

plusieurs téléchargements de fichiers

Ce point de terminaison gère le téléchargement de plusieurs fichiers (jusqu'à 12 dans cet exemple):

//server.js (add this to your existing server.js)

app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, next) => {
  const files = req.files;
  if (!files) {
    const error = new Error('Please choose files');
    error.httpStatusCode = 400;
    return next(error);
  }
  res.send(files);
});
Copier après la connexion

Téléchargement d'image sur MongoDB

Pour stocker des images dans MongoDB, nous devrons installer le package mongodb:

npm install mongodb --save
Copier après la connexion

Ensuite, ajoutez la connexion MongoDB et la logique de gestion de l'image à server.js. (Remarque: les détails de gestion des erreurs et de connexion sont omis pour la concision. Remplacez les espaces réservés comme <your_mongodb_connection_string></your_mongodb_connection_string> par votre chaîne de connexion réelle).

const { MongoClient } = require('mongodb');
const fs = require('file-system'); // For file system operations

// ... (previous code) ...

const client = new MongoClient("<your_mongodb_connection_string>");

// ... (rest of your code) ...

app.post('/uploadImage', upload.single('myImage'), async (req, res) => {
    try {
        await client.connect();
        const db = client.db('your_database_name');
        const imageBuffer = fs.readFileSync(req.file.path);
        const result = await db.collection('images').insertOne({ image: { filename: req.file.filename, buffer: imageBuffer } });
        res.send(result);
    } catch (error) {
        console.error(error);
        res.status(500).send("Error uploading image");
    } finally {
        await client.close();
    }
});

app.get('/photos', async (req, res) => {
    try {
        await client.connect();
        const db = client.db('your_database_name');
        const result = await db.collection('images').find().toArray();
        const imgArray = result.map(element => element._id);
        res.send(imgArray);
    } catch (error) {
        console.error(error);
        res.status(500).send("Error retrieving images");
    } finally {
        await client.close();
    }
});

app.get('/photo/:id', async (req, res) => {
    try {
        await client.connect();
        const db = client.db('your_database_name');
        const result = await db.collection('images').findOne({ _id: new ObjectId(req.params.id) });
        res.contentType('image/jpeg'); // Adjust content type as needed
        res.send(result.image.buffer);
    } catch (error) {
        console.error(error);
        res.status(500).send("Error retrieving image");
    } finally {
        await client.close();
    }
});

// ... (rest of your code) ...</your_mongodb_connection_string>
Copier après la connexion

N'oubliez pas d'installer les packages mongodb et file-system. Remplacez également les espaces réservés par votre nom de base de données et votre chaîne de connexion. Cet exemple amélioré comprend la gestion des erreurs et les opérations asynchrones pour une meilleure robustesse.

File Upload With Multer in Node.js and Express

Ce tutoriel amélioré fournit une solution plus complète et robuste pour gérer les téléchargements de fichiers dans une application Node.js. N'oubliez pas d'adapter le code à vos besoins et à l'environnement spécifiques. Prioriser toujours les meilleures pratiques de sécurité lors de la gestion des téléchargements de fichiers en production.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal