在Node服务端执行命令：
cnpm i multer --save前台页面代码：
<h3>单文件上传-使用form</h3> <form action="/upload/form" method="POST" enctype="multipart/form-data" > <input type="file" name="myfile"> <button type="submit">上传</button> </form>服务器端代码：
var multer = require('multer'); var fs = require('fs'); var path = require('path'); //使用表单上传 var upload = multer({ storage: multer.diskStorage({ //设置文件存储位置 destination: function(req, file, cb) { let date = new Date(); let year = date.getFullYear(); let month = (date.getMonth() + 1).toString().padStart(2, '0'); let day = date.getDate(); let dir = "./public/uploads/" + year + month + day; //判断目录是否存在，没有则创建 if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }); } //dir就是上传文件存放的目录 cb(null, dir); }, //设置文件名称 filename: function(req, file, cb) { let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname); //fileName就是上传文件的文件名 cb(null, fileName); } }) }) router.post('/upload/form',upload.single("myfile") ,function(req,res,next){ res.json({ file: req.file }) })前台页面代码：
<h3>单文件上传-使用ajax</h3> <input type="file" onchange="upload(this)"> <script src="/js/jquery.js"></script> <script> function upload(el){ var files = el.files[0] var formDate = new FormData() formDate.set("myfile",files) $.ajax({ url: '/upload/ajax', data: formDate, type: 'post', contentType: false, processData: false, success: function(res){ console.log(res); } }) } </script>服务器端代码：
// multer代码参考上面 // ...... router.post('/upload/ajax',upload.single("myfile") ,function(req,res,next){ res.json({ file: req.file }) })前台代码：
<body> <h3>多文件上传-使用form</h3> <form action="/upload/form" method="POST" enctype="multipart/form-data" > <div> <input type="file" name="myfile"> </div> <div> <input type="file" name="myfile"> </div> <div> <input type="file" name="myfile"> </div> <div> <input type="file" name="myfile"> </div> <button type="submit">上传</button> </form> </body>服务端代码：
// multer代码参考上面 // ...... router.post('/upload/form',upload.array("myfile",5) ,function(req,res,next){ res.json({ msg: '上传成功' }) })前台页面代码：
<h3>多文件上传-使用ajax</h3> <div> <input type="file" onchange="change(this)"> </div> <div> <input type="file" onchange="change(this)"> </div> <div> <input type="file" onchange="change(this)"> </div> <div> <input type="file" onchange="change(this)"> </div> <button onclick="upload()">上传</button> <script src="/js/jquery.js"></script> <script> var formDate = new FormData() //选择文件事件 function change(el){ var files = el.files[0] formDate.append("myfile",files) } //上传 function upload(){ $.ajax({ url: '/upload/ajax', data: formDate, type: 'post', contentType: false, processData: false, success: function(res){ console.log(res); } }) } </script>服务器端代码：
// multer代码参考上面 // ...... router.post('/upload/ajax',upload.array("myfile",5) ,function(req,res,next){ res.json({ msg: '上传成功' }) })