1.建立express項目
express -e nodejs-uploadfile
2.下載multer中間件
npm i multer or yarn multer
3.在routes/index.js中引用multer，由于還要使用到文件操作，還要引用fs模塊,并指定文件上傳目錄
const multer = require('multer');const fs = require('fs');const UPLOAD_PATH = './uploads'單文件上傳: index.html中文件如下( form文件的類型必須為 enctype="multipart/form-data" ),
<form action="/upload" method="post" enctype="multipart/form-data"> <input name="fileUpload" type="file" /> <img src="" <button type="submit">上傳</button></form>
在routes/index.js里面添加upload路由用來處理上傳文件的操作
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: '上傳成功' }); }); })})如果上傳的文件是圖片的話，還可以使用FileReader對象實現圖片預覽
(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))多文件上傳: 多文件上傳的原理和單文件上傳的原理一樣，代碼如下：
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 }) });})相關代碼在 github.com/bWhirring/n…
總結
以上所述是小編給大家介紹的使用nodejs+express實現簡單的文件上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
