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="" alt=""> <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實現簡單的文件上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！