Fastify 应用中如何处理图片上传和缩放-JavaScript中文网-JavaScript教程资源分享门户

简介

随着移动设备和高清显示屏的普及，用户对于图片的质量和加载速度越来越有要求。为了提高网站的用户体验，前端工程师常常需要在网站中处理图片上传和缩放的功能。Fastify 是一个快速、低开销、可扩展的 Web 框架，它的极简主义设计使得它的性能非常优异。在 Fastify 应用中如何处理图片上传和缩放呢？本文将详细介绍对于图片上传和缩放的处理过程。

图片上传

处理图片上传需要从前端接收文件，并将文件保存到服务器上。在 Fastify 中，处理文件上传可以通过插件 fastify-multipart 来实现。fastify-multipart 使用了 Node.js 的 Stream API，可以快速、高效、流式地处理文件上传。

使用 fastify-multipart 插件的步骤如下：

安装 fastify-multipart 插件。
```
npm install fastify-multipart
```

const fastify = require('fastify')();

fastify.register(require('fastify-multipart'));

在路由中处理文件上传请求。

// javascriptcn.com 代码示例
fastify.post('/upload', async(req, reply) => {
    const parts = req.parts();
    let part;

    while ((part = await parts) != null) {
        if (part.file) {
            // 处理文件
        }
    }

    reply.send('File uploaded!');
});

在处理文件上传的过程中，我们还需要对于上传的文件进行一些安全性检查，比如文件类型和大小的检查、文件名称的检查等，防止文件上传被滥用。

图片缩放

缩放图片可以提高网站加载速度和用户体验，因为较小的图片文件大小可以更快地下载到用户的设备，加速网站的加载速度。在 Fastify 应用中，可以使用 Sharp 来处理图片缩放。

Sharp 是一个用于高性能图像处理的 Node.js 模块，它支持多种图片格式，包括常见的 JPEG、PNG、WebP 等。使用 Sharp 对图片进行缩放的步骤如下：

安装 sharp 模块。
```
npm install sharp
```

加载要缩放的图片。

const sharp = require('sharp');

const image = sharp('original-image.jpg');

调整图片大小。

image.resize({ width: 200, height: 200 });

将图片输出到文件或缓冲区。
```
image.toFile('resized-image.jpg');
```

以上是使用 Sharp 对单个图片进行缩放的过程。在实际应用中，我们可能需要对一组图片进行批量缩放，或者根据不同的设备或客户端需求，生成不同尺寸的图片。因此我们需要结合 Fastify server 和 Sharp 模块，实现图片上传并快速地生成不同尺寸的缩略图。

完整的示例代码如下：

// javascriptcn.com 代码示例
const fastify = require('fastify')();
const fs = require('fs');
const path = require('path');
const sharp = require('sharp');
const { promisify } = require('util');

const readdir = promisify(fs.readdir);

const publicFolder = path.join(__dirname, 'public');
const uploadFolder = path.join(publicFolder, 'upload');
const thumbnailFolder = path.join(publicFolder, 'thumbnail');

fastify.register(require('fastify-static'), {
  root: publicFolder,
});

fastify.register(require('fastify-multipart'));

fastify.post('/upload', async (req, reply) => {
  const parts = req.parts();

  let part;
  let filename;

  while ((part = await parts) != null) {
    if (part.file) {
      filename = part.filename;

      // 检查文件类型和大小
      const fileExt = path.extname(filename).toLowerCase();
      if (!/\.(jpg|jpeg|png|gif|webp)$/.test(fileExt)) {
        reply.code(400).send('Invalid file type');
        return;
      }

      const fileSize = part.byteCount;
      if (fileSize > 1024 * 1024) {
        reply.code(400).send('File size too large');
        return;
      }

      // 创建上传文件夹并保存上传文件
      await fs.promises.mkdir(uploadFolder, { recursive: true });

      const saveTo = path.join(uploadFolder, filename);
      const writeStream = fs.createWriteStream(saveTo);
      part.on('error', (err) => {
        writeStream.destroy(err);
      });

      await new Promise((resolve) => {
        writeStream.on('finish', resolve);
        part.pipe(writeStream);
      });
    }
  }

  // 生成不同尺寸的缩略图
  const thumbnailSizes = [256, 128, 64];
  const thumbnailPromises = [];

  for (const size of thumbnailSizes) {
    await fs.promises.mkdir(thumbnailFolder, { recursive: true });

    const thumbnailFilename = `${size}-${filename}`;
    const thumbnailTo = path.join(thumbnailFolder, thumbnailFilename);

    thumbnailPromises.push(
      sharp(path.join(uploadFolder, filename))
        .resize({ width: size })
        .toFile(thumbnailTo)
    );
  }

  await Promise.all(thumbnailPromises);

  reply.send('File uploaded');
});


fastify.get('/thumbnails', async (req, reply) => {
  const thumbnailFiles = await readdir(thumbnailFolder);

  const thumbnails = [];

  for (const thumbnailFile of thumbnailFiles) {
    const [size, originalFilename] = thumbnailFile.split('-');
    const thumbnailPath = `thumbnail/${thumbnailFile}`;
    const originalPath = `upload/${originalFilename}`;

    thumbnails.push({
      size: parseInt(size),
      thumbnail: thumbnailPath,
      original: originalPath,
    });
  }

  reply.send(thumbnails);
});

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }

  console.log('Server started.');
});

在这份示例代码中，我们创建了一个简单的 Fastify server，实现了文件上传和生成不同尺寸的缩略图的功能。我们可以使用 POST /upload 接口来上传图片，Fastify server 会自动将图片保存到上传文件夹中，并生成不同尺寸的缩略图。接下来我们可以使用 GET /thumbnails 接口来获取所有缩略图的信息，包括缩略图路径和对应的原图路径等。

总结一下，Fastify 是一个快速、低开销、可扩展的 Web 框架，在处理文件上传和缩放的过程中表现得非常出色。使用 fastify-multipart 插件和 Sharp 模块，我们可以快速地在 Fastify 应用中实现文件上传和图片缩放的功能。在实际应用中，我们还需要对于上传的文件进行一些安全性检查，并根据不同的需求生成不同尺寸的缩略图，以提高用户体验和网站的加载速度。

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