如何使用multer对表单上传的图片在保存前进行尺寸调整

你应该在multer解析完上传文件、写入磁盘存储之前这个环节处理图片尺寸，具体实现逻辑如下：

核心思路 #

不要直接使用multer的diskStorage存储原始文件，先将上传的文件暂存到内存中，检测尺寸不符合要求时先做调整，再写入到指定的磁盘路径，避免多余的磁盘IO操作。

推荐使用sharp库处理图片，它性能高、API简单，完全满足尺寸调整的需求。

具体实现步骤 #

1. 安装依赖

npm install sharp

2. 调整multer配置与新增图片处理中间件

const multer = require('multer');
const sharp = require('sharp');
const path = require('path');

// 改用内存存储暂存上传的文件
const memoryStorage = multer.memoryStorage();
const upload = multer({ storage: memoryStorage });

// 图片尺寸检测、调整中间件
const processUploadImage = async (req, res, next) => {
  // 无上传文件直接跳过
  if (!req.file) return next();

  // 沿用你原有的文件名命名规则
  const saveFileName = `${Date.now()}--${req.file.originalname}`;
  const fullSavePath = path.join(__dirname, './public/images', saveFileName);

  try {
    // 可选：先读取原图片尺寸判断是否需要调整，减少无必要的性能消耗
    const imageMeta = await sharp(req.file.buffer).metadata();
    const maxAllowedWidth = 1200; // 可替换为你的业务要求最大宽度
    const maxAllowedHeight = 1200; // 可替换为你的业务要求最大高度

    let imageProcessor = sharp(req.file.buffer);
    // 只有超出尺寸限制时才执行调整
    if (imageMeta.width > maxAllowedWidth || imageMeta.height > maxAllowedHeight) {
      imageProcessor = imageProcessor.resize({
        width: maxAllowedWidth,
        height: maxAllowedHeight,
        fit: 'inside', // 保持图片比例，完整展示不裁剪
        withoutEnlargement: true // 小于限制尺寸的图片不放大，避免模糊
      });
    }

    // 处理后的图片写入磁盘
    await imageProcessor.toFile(fullSavePath);
    // 把处理后的文件名挂载到req对象，方便后续业务逻辑使用
    req.savedImageName = saveFileName;
    next();
  } catch (error) {
    next(error);
  }
};

3. 路由中使用

// upload.single的参数对应你表单中上传图片字段的name属性
app.post('/你的表单提交路由', upload.single('image'), processUploadImage, (req, res) => {
  // 到这里已经完成图片的尺寸校验、调整和存储，直接处理后续业务逻辑即可
  console.log('已保存的图片文件名：', req.savedImageName);
  res.json({ code: 0, msg: '提交成功' });
});

为什么不直接在diskStorage的钩子中处理 #

diskStorage提供的destination和filename钩子仅用来定义文件的存储路径和命名，最终写入磁盘的还是原始上传的文件内容，无法修改文件本身的尺寸等属性，因此不适合在这个环节处理。

内容的提问来源于stack exchange，提问作者adtcode