嘿，你的基础上传流程已经跑通了，不过Multer本身只负责接收文件，不会帮你解析图片的元数据（比如宽高）。要获取宽高，咱们得用专门处理图片的库，我推荐两个常用的：image-size（轻量，只做元数据解析）或者sharp（功能更强，还能做图片处理），下面分别给你演示怎么用。

方法一：用image-size（推荐，轻量快捷） #

第一步：安装依赖 #

在你的Node.js项目里执行：

npm install image-size --save

第二步：修改后端代码 #

把你的上传接口改成这样，用image-size解析req.file.buffer里的图片数据：

const express = require('express');
const images = express.Router()
const cors = require('cors')
const multer = require('multer')
const sizeOf = require('image-size'); // 引入库

images.use(cors())
const upload = multer().single('file')

images.post('/add', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      return res.status(500).send('上传失败：' + err.message);
    }
    // 检查是否是图片文件
    if (!req.file.mimetype.startsWith('image/')) {
      return res.status(400).send('请上传图片文件');
    }
    try {
      // 从buffer读取宽高
      const dimensions = sizeOf(req.file.buffer);
      // 把宽高和原文件数据一起返回
      res.send({
        ...req.file,
        width: dimensions.width,
        height: dimensions.height
      });
    } catch (parseErr) {
      res.status(400).send('无法解析图片元数据：' + parseErr.message);
    }
  })
})

module.exports = images

方法二：用sharp（适合需要额外图片处理的场景） #

如果之后你还要做图片压缩、格式转换之类的操作，sharp会更合适：

第一步：安装依赖 #

npm install sharp --save

第二步：修改后端代码 #

const express = require('express');
const images = express.Router()
const cors = require('cors')
const multer = require('multer')
const sharp = require('sharp'); // 引入库

images.use(cors())
const upload = multer().single('file')

images.post('/add', async function (req, res) {
  upload(req, res, async function (err) {
    if (err) {
      return res.status(500).send('上传失败：' + err.message);
    }
    if (!req.file.mimetype.startsWith('image/')) {
      return res.status(400).send('请上传图片文件');
    }
    try {
      // 用sharp获取元数据
      const metadata = await sharp(req.file.buffer).metadata();
      res.send({
        ...req.file,
        width: metadata.width,
        height: metadata.height,
        format: metadata.format // 还能拿到图片格式等其他信息
      });
    } catch (parseErr) {
      res.status(400).send('无法解析图片元数据：' + parseErr.message);
    }
  })
})

module.exports = images

前端小优化 #

另外，你前端设置的headers: { 'Content-Type': 'multipart/form-data' }其实可以去掉——当你用FormData作为请求体时，Axios会自动生成正确的Content-Type（包含boundary），手动设置反而可能导致上传失败，所以改成这样更稳妥：

let imgdata = new FormData();
imgdata.append('file', file)
axios.post(`${API_URL}images/add`, imgdata)
 .then( res=> { console.log('宽高信息：', res.data.width, res.data.height) })
 .catch( err => { console.log(err) })

这样修改后，你就能在后端拿到图片的宽高，之后就可以把这些数据存到数据库里啦。

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