React网站Node.js后端multer文件上传错误返回问题

问题根源 #

在multer的fileFilter中直接通过cb(new Error(...))抛出错误时，Express默认会返回500内部服务器错误，而非自定义的错误信息。

修复步骤 #

1. 修正fileFilter的错误传递逻辑 #

调整fileFilter的回调调用方式，明确传递错误对象并标记文件不被接受：

fileFilter: (req, file, cb) => {
    if (file.mimetype.startsWith("image/")) {
        console.log("Success!!!");
        cb(null, true);
    } else {
        console.log("Error!!!!");
        // 第一个参数传入错误对象，第二个参数传false表示拒绝该文件
        cb(new Error("Invalid file type. Only image files are allowed."), false);
    }
}

2. 添加全局错误处理中间件 #

在所有路由定义之后，添加Express错误处理中间件，捕获multer抛出的错误并返回自定义响应：

// 全局错误处理中间件
app.use((err, req, res, next) => {
    if (err.message === "Invalid file type. Only image files are allowed.") {
        return res.status(400).json({
            error: err.message
        });
    }
    // 其他未知错误返回500状态
    res.status(500).json({
        error: "Internal server error"
    });
});

可选：路由内直接捕获错误 #

如果需要针对单个上传路由做定制化处理，可以将multer中间件的调用放在路由回调内，直接捕获错误：

app.post("/upload/images", (req, res) => {
    uploadMulter.array("files[]")(req, res, (err) => {
        if (err) {
            return res.status(400).json({error: err.message});
        }
        // 正常处理上传文件逻辑
        const files = req.files;
        const fileContents: FileContent[] = [];
        files.forEach((file) => {
            const data = fs.readFileSync(file.path, "binary");
            fileContents.push({
                fileName: file.originalname,
                content: Buffer.from(data, "binary").toString("base64"),
                type: file.mimetype
            });
        });
        res.status(200).json({files: fileContents});
    });
});

方案说明 #

• 全局错误处理中间件适合统一管理所有路由的错误响应格式；
• 路由内捕获错误适合针对特定上传接口做个性化错误处理；
• 两种方案任选其一即可解决问题。

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