文件上传
文件上传需要借助一个中间件 multer 因此我们需要安装 cnpm install multer --save
前端界面
在express创建的项目下的 public/upload目录下创建 indexfileupload.html 如果你没有需要进行创建对应的文件 然后再地址栏输出 http://127.0.0.1:666/upload/indexfileupload.html 可以显示下下面对应的界面
indexfileupload.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文件上传</title> </head> <body> <form action="/upload/upload" method="post" enctype="multipart/form-data"> <input type="file" name="logo2"> <br /> <input type="submit" value="文件上传"> </form> </body> </html>
indexfileupload.html文件的注意点
1===》action="/upload/upload" 表示的是接口地址。 因为这里前后端没有分离，因此不需要写最前面的地址 2==》method="post" 表示的是请求的方式 3==》enctype="multipart/form-data" 文件上传的固定格式 4==》<input type="file" name="logo2"> 中的file表示文件。 name="logo2" 需要与 后端的 upload.single('name') 与之对应 router.post('/upload', upload.single('logo2'), (req,res) => { var file = req.file res.send({ code:'0', msg:'上传成功'}) })
后端代码-在routes目录下创建 fileupload.js文件
var express = require('express') var router = express.Router() // 引入文件模块 var fs = require('fs') // 引入路径模块 var path = require('path') // 后端处理文件的模块 var multer=require('multer') // 配置路径和文件名 var storage = multer.diskStorage({ //上传文件到服务器的存储位置 destination: 'public/upload', filename: function (req, file, callback) { console.log('file', file) //上传的文件信息 var fileFormat = (file.originalname).split('.') var filename = new Date().getTime() callback(null, filename+"."+fileFormat[fileFormat.length-1]) } }) var upload = multer({ storage }) //接口 router.post('/upload', upload.single('logo2'), (req,res) => { var file = req.file res.send({ code:'0', msg:'上传成功'}) }) //导出 module.exports = router;
在app.js中注册使用路由
// 引入 var uploadRouter = require('./routes/fileupload'); //使用 app.use('/upload', uploadRouter);
在浏览器中输入http://127.0.0.1:666/upload/indexfileupload.html 然后选择对应的文件，然后点击文件上传按钮，就可以实现文件上传成功了
