Node.js + Koa + Axios 实现图片上传和回显功能

2023-11-08 10:11:40

前言

在现代 Web 开发中，图片上传和回显功能是许多应用程序的常见需求。在本文中，我们将使用 Node.js、Koa 和 Axios 来实现一个简单的图片上传和回显功能。该功能可以帮助您轻松地将图片上传到服务器，并以正确的格式回显给客户端。

在继续之前，您需要确保已经安装了 Node.js 和 npm。您还可以使用 yarn 来管理依赖关系。

实现步骤

1. 安装依赖项

首先，我们需要安装必要的依赖项。打开终端，执行以下命令：

npm install koa koa2-cors @koa/router multer

2. 创建 Koa 服务器

接下来，我们需要创建一个 Koa 服务器。在项目根目录中，创建一个名为 server.js 的文件，并输入以下代码：

const Koa = require('koa');
const app = new Koa();
const router = require('@koa/router')();
const multer = require('multer');

// 允许跨域
app.use(koa2Cors());

// 上传文件配置
const upload = multer({ dest: 'uploads/' });

// 路由配置
router.post('/upload', upload.single('file'), async (ctx, next) => {
  ctx.body = {
    success: true,
    filename: ctx.req.file.filename,
  };
});

router.get('/uploads/:filename', async (ctx, next) => {
  ctx.body = fs.readFileSync(`uploads/${ctx.params.filename}`);
});

app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

3. 运行服务器

现在，我们可以运行服务器了。在终端中，执行以下命令：

node server.js

服务器将在端口 3000 上启动。

4. 测试功能

现在，我们可以测试一下上传和回显图片的功能。

使用您喜欢的工具（例如 Postman 或 curl）向 http://localhost:3000/upload 端点发送 POST 请求，并附带一个图片文件。
服务器会将图片保存到 uploads 目录中，并返回一个 JSON 响应，其中包含上传成功的标志和图片的文件名。
使用您喜欢的工具向 http://localhost:3000/uploads/:filename 端点发送 GET 请求，其中 :filename 是您上传的图片的文件名。
服务器会返回图片文件。