Node.js Express中如何从URL获取图片缩放参数？

你当前的路由配置是基于URL路径参数的，但需求是通过查询参数（?w=1280&h=720）传递宽高，需要调整路由、控制器和工具函数的逻辑，具体步骤如下：

1. 修正路由配置 #

去掉原路由中的:size参数，只匹配图片文件名，因为宽高参数将通过URL查询串传递：

const router = express.Router()

// 仅匹配图片文件名，宽高参数从查询串获取
router.get('/:image', Controller.getImage)

2. 在控制器中获取并校验查询参数 #

Express会自动解析URL查询参数到req.query对象，直接从中取出w和h即可，同时建议增加参数校验避免非法输入：

export default {
  getImage: [
    async (req, res, next) => {
      try {
        const { image } = req.params
        // 从查询参数中提取宽高，转换为数字类型
        const width = parseInt(req.query.w, 10)
        const height = parseInt(req.query.h, 10)

        // 校验宽高是否为有效数字
        if (!width || !height || isNaN(width) || isNaN(height)) {
          return res.status(400).send('请提供有效的宽高参数（w和h）')
        }

        const path = await generateFile(image, width, height)
        res.sendFile(path)
      } catch (err) {
        next(err)
      }
    }
  ]
}

3. 修复并优化图片生成函数 #

你原函数存在变量名错误、未处理异步逻辑的问题，调整为接收宽高参数，并用Promise包装sharp的异步操作，同时增加重复文件检查提升性能：

import sharp from 'sharp'
import path from 'path'
import fs from 'fs/promises'

// 确保resized目录存在，避免文件写入失败
await fs.mkdir(path.resolve('./resized'), { recursive: true })

async function generateFile(image, width, height) {
  // 生成带尺寸标识的唯一文件名，避免重复生成相同尺寸图片
  const parsedImage = path.parse(image)
  const resizedFilename = `${parsedImage.name}_${width}x${height}${parsedImage.ext}`
  const outputPath = path.resolve('./resized', resizedFilename)

  // 先检查文件是否已存在，存在则直接返回路径
  try {
    await fs.access(outputPath)
    return outputPath
  } catch {
    // 文件不存在时执行缩放
    await sharp(path.resolve('./img', image))
      .resize(width, height, {
        // 可选：添加缩放策略，比如保持比例、禁止放大原图
        fit: sharp.fit.cover,
        withoutEnlargement: true
      })
      .toFile(outputPath)

    return outputPath
  }
}

关键说明 #

• 查询参数获取：Express的req.query会自动解析?后的键值对，比如?w=1280&h=720会被解析为{ w: '1280', h: '720' }，需转换为数字类型再传给sharp。
• 重复生成避免：通过生成带尺寸的文件名，先检查文件是否存在，避免重复处理相同尺寸的图片，提升响应速度。
• 参数校验：防止用户传入非数字的宽高参数，避免sharp处理时报错。

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