剖析Egg——（8）文件上传和图片处理

2023-10-10 11:11:35

大家好，今天我们继续来学习eggjs框架，在前面的文章中，我们已经讲解了增删改查的功能，并使用了数据库来存储数据。但是实际开发中，除了文字数据外，图片等文件也是非常重要的数据类型，所以今天这篇文章，我们就来学习如何使用eggjs进行文件上传和图片处理。

一、文件上传

在前端，我们使用input标签的file属性来选择需要上传的文件，然后使用form表单提交。在服务器端，我们可以使用Egg.js中的multer中间件来处理文件上传。Multer是一个强大的文件上传中间件，它可以帮助我们轻松地处理各种文件上传场景。

安装multer：

npm install --save multer

配置multer：

const multer = require('multer');

const storage = multer.diskStorage({
  destination: 'public/uploads',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage });

在路由中使用multer：

router.post('/upload', upload.single('avatar'), async (ctx, next) => {
  ctx.body = {
    code: 0,
    message: '上传成功',
    data: ctx.req.file
  };
});

这样，我们就可以实现文件上传功能了。

二、图片处理

有时候，我们需要对上传的图片进行一些处理，比如裁剪、缩放、加水印等。在Egg.js中，我们可以使用sharp库来进行图片处理。Sharp是一个强大的图片处理库，它可以帮助我们轻松地完成各种图片处理任务。

安装sharp：

npm install --save sharp

使用sharp：

const sharp = require('sharp');

sharp('public/uploads/1659888012345-image.png')
  .resize(200, 200)
  .toFile('public/uploads/1659888012345-image-200x200.png', (err, info) => {
    if (err) {
      console.log(err);
    } else {
      console.log('图片处理成功');
    }
  });