Koa 框架实现图片上传和下载教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，图片上传和下载功能是非常常见的。本文将介绍如何使用 Koa 框架实现图片上传和下载功能。

什么是 Koa 框架

Koa 是一个基于 Node.js 平台的新一代 web 开发框架，它使用了 ES6 的语法特性，提供了更加简洁、优雅的 API 接口。Koa 框架的核心是中间件，它可以非常方便地实现各种功能。

图片上传

1. 安装依赖

首先，我们需要安装一些依赖。在终端中输入以下命令：

npm install koa koa-router koa-body koa-static koa-multer

其中，koa 是 Koa 框架本身，koa-router 是 Koa 的路由模块，koa-body 是用来处理请求体的模块，koa-static 是用来处理静态资源的模块，koa-multer 是用来处理文件上传的模块。

2. 创建上传文件夹

在项目根目录下创建一个文件夹，用来存放上传的图片。在终端中输入以下命令：

mkdir public/uploads

3. 编写上传接口

在项目根目录下创建一个 index.js 文件，输入以下代码：

// javascriptcn.com 代码示例
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');
const koaStatic = require('koa-static');
const koaMulter = require('koa-multer');
const path = require('path');

const app = new Koa();
const router = new Router();

// 设置静态资源目录
app.use(koaStatic(path.join(__dirname, 'public')));

// 设置上传文件的存储路径和文件名
const storage = koaMulter.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

// 设置上传文件的限制
const limits = {
  fileSize: 1024 * 1024 * 2 // 2MB
};

// 创建上传实例
const upload = koaMulter({ storage, limits });

// 定义上传接口
router.post('/upload', upload.single('file'), async (ctx) => {
  ctx.body = {
    code: 200,
    message: '上传成功',
    data: {
      url: ctx.req.file.path.replace('public', '')
    }
  };
});

// 启动服务
app.use(koaBody());
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

在上面的代码中，我们首先导入 Koa 框架、路由模块、处理请求体的模块、处理静态资源的模块、处理文件上传的模块和 path 模块。然后，我们创建了一个 Koa 实例和一个路由实例。接着，我们设置了静态资源目录，使得上传的图片可以通过浏览器访问。然后，我们定义了一个上传文件的存储路径和文件名的函数，并创建了一个上传实例。最后，我们定义了一个上传接口，使用 upload.single() 方法处理上传的文件，并返回上传成功的信息。

4. 测试上传接口

在终端中输入以下命令启动服务：

node index.js

然后，在浏览器中访问 http://localhost:3000 就可以看到上传页面了。选择一张图片上传，上传成功后会返回一个 JSON 数据，其中 data.url 属性就是上传成功的图片的访问地址。

图片下载

1. 编写下载接口

在 index.js 文件中添加以下代码：

// 定义下载接口
router.get('/download/:filename', async (ctx) => {
  const filename = ctx.params.filename;
  const filePath = path.join(__dirname, `public/uploads/${filename}`);
  ctx.attachment(filePath);
  ctx.body = koaStatic(filePath);
});

在上面的代码中，我们定义了一个下载接口，使用 ctx.attachment() 方法设置下载文件的名称，使用 koaStatic() 方法返回文件内容。

2. 测试下载接口

在浏览器中访问 http://localhost:3000/download/filename 就可以下载上传的图片了。

总结

本文介绍了如何使用 Koa 框架实现图片上传和下载功能。通过学习本文，读者可以了解到 Koa 框架的使用方法，以及如何处理文件上传和下载。本文的代码已经上传到 GitHub，读者可以下载并运行。

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