koa使用koa-multer进行文件的上传和表单的提交

下图是我建立的文件夹的布局


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文件夹里就可以看见我们的上传的文件。


在控制台那里输出



这样我们就获取到了文件和表单数据了。


猜你喜欢

转载自blog.csdn.net/ymwwow/article/details/80862423