Next.js前端传图至Node.js后端失败：图片数据丢失求助

核心问题 #

1. 前端无法通过JSON传输File对象：JSON.stringify()无法序列化File类型数据，导致图片信息根本没发送到后端。
2. 前后端数据格式不匹配：后端用multer处理multipart/form-data类型的文件上传，但前端发送的是application/json格式，multer无法解析到文件。

前端代码修改 #

1. 修复表单输入的属性错误

把数字输入框的values改为value（拼写错误）：

<input type="number" min={0} max={100} value={quality} onChange={(event) => setQuality(event.target.value)} />

2. 改用FormData传递数据

修改handleSubmit函数，用FormData包装文件和参数，而不是JSON：

const handleSubmit = (event) => {
  event.preventDefault()
  setLoading(true)

  const formData = new FormData()
  formData.append('image', image)
  formData.append('quality', quality)
  formData.append('format', format)

  fetch('http://localhost:3001/api/v1/upload', {
    method: 'POST',
    body: formData, // 直接传FormData，浏览器会自动设置正确的Content-Type
  })
    .then((response) => response.json())
    .then((response) => {
      setPreviewUrl(response.previewUrl)
    })
    .catch((error) => {
      setError(error)
    })
    .finally(() => {
      setLoading(false)
    })
}

后端代码修改 #

1. 正确获取上传的文件

multer处理后，文件信息存在req.file对象里，不是req.body.image。同时调整sharp的输入源：

router.post("/upload", uploadMiddleware.single("image"), (req, res) => {
  // 从multer获取文件，从req.body获取其他参数
  const { format, quality } = req.body;
  // 用multer保存的文件路径，或者直接用req.file.buffer（内存读取）
  const imagePath = req.file.path;

  sharp(imagePath)
    .resize(300, 300)
    .toFormat(format, { quality: parseInt(quality) }) // quality是字符串，转成数字
    .toBuffer((err, buffer) => {
      if (err) {
        console.error(err);
        return res.status(500).json({ error: "图片处理失败" });
      }
      // 返回base64格式作为previewUrl，符合前端预览需求
      const dataURL = `data:image/${format};base64,${buffer.toString('base64')}`;
      res.json({ previewUrl: dataURL });
    });
});

2. 可选：配置静态文件服务（返回真实URL）

如果希望返回可直接访问的图片URL，需要在express中配置静态目录，比如把优化后的图片保存到public/optimized：

// 在主app.js中添加静态文件服务配置
app.use(express.static('public'));

// 修改后端sharp的处理逻辑
sharp(imagePath)
  .resize(300, 300)
  .toFormat(format, { quality: parseInt(quality) })
  .toFile(`public/optimized/${Date.now()}.${format}`, (err, info) => {
    if (err) {
      console.error(err);
      return res.status(500).json({ error: "图片处理失败" });
    }
    const previewUrl = `http://localhost:3001/optimized/${Date.now()}.${format}`;
    res.json({ previewUrl });
  });

额外注意事项 #

• 确保后端的uploads和public/optimized目录存在，否则multer和sharp会报错，可提前用fs.mkdirSync创建：

  const fs = require('fs');
  const uploadDir = './uploads';
  const optimizedDir = './public/optimized';
  if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
  if (!fs.existsSync(optimizedDir)) fs.mkdirSync(optimizedDir, { recursive: true });
  

• quality参数从前端传过来是字符串，必须转成数字再传给sharp，否则会导致压缩失效。

内容的提问来源于stack exchange，提问作者Batuhan Zorbey Zengin