Rumah >hujung hadapan web >tutorial css >Muat naik fail dengan multer di node.js dan ekspres

Muat naik fail dengan multer di node.js dan ekspres

Christopher Nolan
Christopher Nolanasal
2025-03-02 09:15:14300semak imbas

Tutorial ini membimbing anda melalui membina sistem muat naik fail menggunakan Node.js, Express, dan Multer. Kami akan merangkumi muat naik fail tunggal dan berganda, dan juga menunjukkan menyimpan imej dalam pangkalan data MongoDB untuk mendapatkan semula kemudian.

Pertama, sediakan projek anda:

mkdir upload-express
cd upload-express
npm init -y
npm install express multer mongodb file-system --save
touch server.js
mkdir uploads

Seterusnya, buat fail server.js anda. Ini akan mengendalikan muat naik fail dan logik pelayan. Pada mulanya, kami akan menyediakan aplikasi Express asas:

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'));

Sekarang, mari kita konfigurasikan Multer untuk mengendalikan muat naik fail ke cakera:

//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 });

mengendalikan muat naik fail

muat naik fail tunggal

Buat titik akhir untuk mengendalikan muat naik fail tunggal. Ingatlah untuk membuat <form></form> yang sepadan dengan input fail dalam index.html anda (tidak ditunjukkan di sini, tetapi harus menggunakan permintaan pos untuk /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);
});

Pelbagai fail muat naik

titik akhir ini mengendalikan memuat naik pelbagai fail (sehingga 12 dalam contoh ini):

//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);
});

muat naik gambar ke mongodb

Untuk menyimpan imej di MongoDB, kita perlu memasang pakej mongodb:

npm install mongodb --save

Kemudian, tambah sambungan MongoDB dan logik pengendalian imej ke server.js. (Nota: Pengendalian ralat dan butiran sambungan ditinggalkan untuk keringkasan. Gantikan ruang letak seperti <your_mongodb_connection_string></your_mongodb_connection_string> dengan rentetan sambungan sebenar anda).

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>

ingat untuk memasang pakej mongodb dan file-system. Juga ganti ruang letak dengan nama pangkalan data dan rentetan sambungan anda. Contoh yang lebih baik ini termasuk pengendalian ralat dan operasi tak segerak untuk ketahanan yang lebih baik.

File Upload With Multer in Node.js and Express

Tutorial yang dipertingkatkan ini menyediakan penyelesaian yang lebih lengkap dan mantap untuk mengendalikan muat naik fail dalam aplikasi Node.js. Ingatlah untuk menyesuaikan kod ke keperluan dan persekitaran khusus anda. Sentiasa mengutamakan amalan terbaik keselamatan semasa mengendalikan muat naik fail dalam pengeluaran.

Atas ialah kandungan terperinci Muat naik fail dengan multer di node.js dan ekspres. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn