Rumah >hujung hadapan web >tutorial css >Muat naik fail dengan multer di node.js dan ekspres
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 });
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); });
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); });
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.
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!