下图是我建立的文件夹的布局
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文件夹里就可以看见我们的上传的文件。
在控制台那里输出
这样我们就获取到了文件和表单数据了。