-
koa-bodyparser
在Koa框架中，处理post请求数据的有一个koa-bodyparser模块，但是这个模块只能处理post的数据，不能够处理文件类型的传输。
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const body = require('koa-body');
const app = new Koa;
const router = new Router;
app.use(bodyParser()); // 只会处理post请求的数据，但是不会处理文件类型
router.post('/getData', (ctx, next) => {
const data = ctx.request.body; //获取发送的请求参数
ctx.body = data;
console.log(ctx.body);
})
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => console.log('http://localhost:3000'))
图1.png
-
koa-body
koa-body不仅能处理post请求的数据，同时也能够处理文件类型的上传。
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const body = require('koa-body');
const app = new Koa;
const router = new Router;
app.use(body()); // 不仅处理post请求的数据，也能处理文件类型
router.post('/getData', (ctx, next) => {
const data = ctx.request.body; //获取发送的请求参数
ctx.body = data;
console.log(ctx.body);
})
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => console.log('http://localhost:3000'))
这种方式与koa-bodyparser一样，也能够拿到请求到的数据。
- koa-body处理上传图片的文件类型
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const body = require('koa-body');
const static = require('koa-static');
const path = require('path')
const app = new Koa;
const router = new Router;
app.use(body({
multipart: true
}));
router.post('/getData', (ctx, next) => {
const files = ctx.request.files; //获取上传的image数据
ctx.body = files;
console.log(ctx.body);
})
app.use(static(path.join(__dirname, '/public')));
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => console.log('http://localhost:3000'))
上述代码我们创建了一个static静态资源，然后去读取一个静态资源目录去测试获取上传的image图片信息。
模板代码：
<!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="/getData" method="POST" enctype="multipart/form-data">
<input type="text" name="imgname">
<input type="file" name="img">
<input type="submit" name="mufile">
</form>
</body>
</html>
image2.png
可以看到，上传的图片信息是已经拿到了。
同样的我们可以设置保存上传的图片存在当前项目目录中去，以及保存原来的图片的后缀名。
app.use(body({
multipart: true,
formidable:{
// 上传存放的路劲
uploadDir: path.join(__dirname,'./upload'),
// 保持后缀名\
keepExtensions: true,
onError(err){
console.log(err)
}
}
}));
image3.png
不仅可以修改文件的后缀名，同时也可以去控制其图片大小以及修改上传的图片名称
app.use(body({
multipart: true,
formidable:{
// 上传存放的路劲
uploadDir: path.join(__dirname,'./upload'),
// 保持后缀名\
keepExtensions: true,
// 文件大小
// maxFileSize: 5000,
onFileBegin: (name, file) => {
// 获取后缀, 如: .js .txt
const reg = /\.[A-Za-z]+$/g
const ext = file.name.match(reg)[0]
//修改上传文件名
file.path = path.join(__dirname,"./upload/") + Date.now() + ext;
},
onError(err){
console.log(err)
}
}
}));
这样，我们上传的image就是通过正则截取的图片后缀名拼接上当前时间戳完成的。
image4.png
