使用Multer保存图片时出现ERR_HTTP_INVALID_STATUS_CODE错误求助

使用Multer保存图片时遇到RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: ENOENT错误，通过FormData结合fetch API发送POST请求上传图片，后端返回该错误导致前端出现“unexpected token < at position 0”解析错误。

相关代码 #

后端Multer配置 #

const multer = require('multer');
const path = require('path');
const { v1: uuidv1 } = require('uuid');

const MIME_TYPE_MAP = {
    'image/png': 'png',
    'image/jpeg': 'jpeg',
    'image/jpg': 'jpg'
}

const fileUpload = multer({
    limits: 500000,
    storage: multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, path.join(__dirname, 'uploads/images'));
        },
        filename: (req, file, cb) =>  {
            const ext = MIME_TYPE_MAP[file.mimetype];
            cb(null, uuidv1() + '.' + ext);
        }
    }),
    fileFilter: (req, file, cb) => {
        const isValid = !!MIME_TYPE_MAP[file.mimetype];
        const error = isValid ? null : new Error('Invalid mime type!');
        cb(error, isValid);
    }
});

module.exports = fileUpload;

后端路由使用 #

const express = require("express");
const { body } = require("express-validator");

const fileUpload = require('../middleware/file-upload');

const router = express.Router();

router.post(
  "/signup",
  fileUpload.single('image'),
  body("name").not().isEmpty(),
  body("email").normalizeEmail().isEmail(),
  body("password").isLength({ min: 6 }),
  (req, res) => {
    res.json({user: req.body})
  }
);

module.exports = router;

前端请求代码 #

const formData = new FormData();
formData.append('name', formState.inputs.name.value);
formData.append('email', formState.inputs.email.value);
formData.append('password', formState.inputs.password.value);
formData.append('image', formState.inputs.image.value);

const responseData = await fetch(
  "http://localhost:5000/api/users/signup",
  {
    method: "POST",
    body: formData
  }
);

解决方案 #

1. 确保上传目录存在（核心问题） #

ENOENT错误表示目标目录不存在，Multer不会自动创建目录。可以手动创建uploads/images文件夹，或者在代码中自动生成：

修改Multer配置的destination部分，引入fs模块递归创建目录：

const fs = require('fs');
// ...
storage: multer.diskStorage({
    destination: (req, file, cb) => {
        const uploadPath = path.join(__dirname, 'uploads/images');
        // 递归创建目录，不存在则自动生成
        fs.mkdirSync(uploadPath, { recursive: true });
        cb(null, uploadPath);
    },
    // ... 其他配置
}),

2. 修正前端图片字段传递 #

前端代码中formState.inputs.image.value是文件路径字符串，不是Multer需要的File对象，需改为传递input的File实例：

// 假设image是type="file"的输入框，取第一个选中的文件
formData.append('image', formState.inputs.image.files[0]);

3. 完善后端错误处理 #

避免Multer错误直接抛出导致状态码异常，添加错误处理中间件：

// 在路由末尾添加错误处理逻辑
router.use((error, req, res, next) => {
    // 处理Multer相关错误
    if (error instanceof multer.MulterError) {
        return res.status(400).json({ message: error.message });
    }
    // 处理其他未知错误
    res.status(500).json({ message: error.message || '服务器内部错误' });
});

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