Nodejs koa2上传文件

最新推荐文章于 2024-01-02 14:29:30 发布

lihefei_coder

最新推荐文章于 2024-01-02 14:29:30 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： koa koa2 文章标签： nodejs koa 上传文件

本文链接：https://blog.youkuaiyun.com/lihefei_coder/article/details/121429072

koa 同时被 2 个专栏收录

9 篇文章

订阅专栏

koa2

5 篇文章

订阅专栏

本文介绍如何使用Node.js和Koa框架搭建一个文件上传服务，包括创建项目、配置依赖、编写服务端代码及前端上传表单等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建项目目录

nodejs-koa-upload/
├── public/
│   ├── upload/
│   └── index.html
└── src/
    └── app.js

2.初始化项目

npm init -y

3.安装依赖包

cnpm install koa koa-router koa-body koa-static -S

包名	作用
koa	web服务框架
koa-router	路由
koa-body	解析请求
koa-static	静态资源服务

4.编写服务端代码

/src/app.js

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const koaStatic = require('koa-static');
const app = new Koa();
const router = new Router();

// 解析上传文件中间件
app.use(
    koaBody({
        multipart: true, // 开启文件上传
        formidable: {
            maxFileSize: 500 * 1024 * 1024, // 设置上传文件大小最大限制，默认5M
            keepExtensions: true, // 保留文件拓展名
        },
    })
);

// 上传单个文件
router.post('/api/uploadfile', async (ctx) => {
    const file = ctx.request.files.file; // 获取文件
    const reader = fs.createReadStream(file.path); // 创建可读流
    const filePath = path.join(__dirname, `../public/upload/${file.name}`); // 文件保存的路径;
    const upStream = fs.createWriteStream(filePath); // 创建可写流
    reader.pipe(upStream); // 可读流通过管道写入可写流

    ctx.body = '上传成功';
});

// 上传多个文件
router.post('/api/uploadfiles', async (ctx) => {
    const files = ctx.request.files.file; // 获取上传文件
    for (let file of files) {
        const reader = fs.createReadStream(file.path); // 创建可读流
        const filePath = path.join(__dirname, `../public/upload/${file.name}`); // 文件保存的路径
        const upStream = fs.createWriteStream(filePath); // 创建可写流
        reader.pipe(upStream); // 可读流通过管道写入可写流
    }

    ctx.body = '上传成功！';
});

app.use(router.routes());

// 静态资源服务
const static = koaStatic(path.join(__dirname, '../public'));
app.use(static);

const hostName = 'localhost';
const port = 9900;
app.listen(port, hostName, () => {
    console.log(`服务运行在http://${hostName}:${port}`);
});
console.log('成功启动');

5.编写前端上传表单页面

/public/index.html

<!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>Document</title>
    <style>
        fieldset {
            width: 400px;
            min-height: 200px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <form action="http://localhost:9900/api/uploadfile" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>上传单个文件</legend>
            <input type="file" name="file" id="file" value="" />
            <br><br>
            <input type="submit" value="提交" />
        </fieldset>
    </form>
    <br>
    <form action="http://localhost:9900/api/uploadfiles" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>上传多个文件</legend>
            <input type="file" name="file" id="file" value="" multiple="multiple" />
            <br><br>
            <input type="submit" value="提交" />
        </fieldset>
    </form>
</body>
</html>