下图是我建立的文件夹的布局
1、前端页面(方便演示,我简单做一个表单)
<form action="/upload" method="POST" enctype="multipart/form-data"> <p>姓名:</p> <input type="text" name="stuName"><br> <p>学号:</p> <input type="text" name="stuNo"><br> <p>爱好:</p> <input type="text" name="hobby"><br> <p>选择文件</p> <input type="file" name="file"><br> <br> <input type="submit"> </form>这里的话是存在文件和表单数据的,现在我们要做的是在后台可以获取到表单数据
看我的app.js文件
const Koa = require('koa'); const router = require('koa-router')(); //注意:引入的方式 const app = new Koa(); const render = require('koa-art-template'); const static = require('koa-static'); const multer = require('koa-multer'); //以下是配置 var storage = multer.diskStorage({ //定义文件保存路径 destination:function(req,file,cb){ cb(null,'./upload/');//路径根据具体而定。如果不存在的话会自动创建一个路径 }, //注意这里有个, //修改文件名 filename:function(req,file,cb){ var fileFormat = (file.originalname).split("."); cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]); } }) var upload = multer({ storage: storage }); /*配置模板路径*/ render(app,{ root:path.join(__dirname,'views'), extname:'.html', debug:process.env.NODE_ENV !=='production' }); //配置静态资源中间件 app.use(static(__dirname + '/public')); router.post('/upload',upload.single('file'), async (ctx, next) => { console.log(ctx.req.body); ctx.body = { filename: ctx.req.file.filename //返回文件名 } }) app.use(router.routes());//启动路由 app.use(router.allowedMethods()); app.listen(3000,()=>{ console.log('starting at port 3000'); });最后在upload文件夹里就可以看见我们的上传的文件。在控制台那里输出
这样我们就获取到了文件和表单数据了。