Koa 实现文件上传-JavaScript中文网-JavaScript教程资源分享门户

Koa 是一个 Node.js 的 Web 框架，采用了异步处理流程，基于 Promise 实现的中间件机制，拥有轻量、简洁、灵活等优点，并且其独特的 Error Handling 机制更方便了处理错误。本文将会介绍通过 Koa 实现文件上传的相关内容。

安装 Koa 和 koa-body

在开始实现文件上传之前，我们需要先安装 Koa 和 koa-body，可以使用以下命令进行安装：

npm install --save koa koa-body

实现文件上传

我们通过以下步骤来实现文件上传：

1. 导入 koa、koa-body 模块

const Koa = require('koa')
const koaBody = require('koa-body')
const app = new Koa()

2. 设置 koa-body

multipart：支持文件上传
formidable：使用 HTTP incoming form 解析器
uploadDir：上传路径（可选）
keepExtensions：保持文件后缀名（默认 true）

app.use(koaBody({
    multipart: true,
    formidable: {
        uploadDir: './uploads',
        keepExtensions: true
    }
}))

3. 处理文件上传请求

app.use(async (ctx) => {
    const files = ctx.request.files
    if (!files) {
        ctx.body = '没有选择文件！'
        return
    }
    ctx.body = '上传成功！'
})

完整代码如下：

const Koa = require('koa')
const koaBody = require('koa-body')
const app = new Koa()

app.use(koaBody({
    multipart: true,
    formidable: {
        uploadDir: './uploads',
        keepExtensions: true
    }
}))

app.use(async (ctx) => {
    const files = ctx.request.files
    if (!files) {
        ctx.body = '没有选择文件！'
        return
    }
    ctx.body = '上传成功！'
})

app.listen(3000, () => {
    console.log('Server is listening on http://localhost:3000')
})

实现文件上传页面

我们可以通过 HTML 表单的方式来实现文件上传页面，为了方便，下面是一个简单的表单示例。

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
    <form method="POST" enctype="multipart/form-data" action="/upload">
        <input type="file" name="file" /><br />
        <input type="submit" value="上传" />
    </form>
</body>
</html>

运行程序

通过以下命令来启动程序：

node index.js

然后，在浏览器中访问 http://localhost:3000/upload 来进入文件上传界面，选择文件并上传即可。

总结

通过本文的介绍，我们了解了如何在 Koa 中实现文件上传的相关知识，同时也了解了通过 koa-body 模块来解析请求参数的方法。在实际工作中，文件上传是一个很常见的需求，因此本文的内容对于前端开发来说具备一定的实用性和指导意义。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a219c6add4f0e0ffa29fe5

Koa 实现文件上传