Koa2: 处理文件上传模块koa-body

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

最后编辑于：2022.03.31 23:31:34