使用Multer实现图片上传时遭遇Internal Server Error(500)问题

问题描述 #

按照YouTube教程尝试用Multer实现图片上传功能，服务器抛出Internal Server Error(500)。运行日志能完整输出文件信息，但响应内容显示.jpg。相关代码、日志及错误响应如下：

代码 #

index.html

<body>
<form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit">
</form>
</body>

server.js

const path = require('path');
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.use(express.static(path.join(__dirname,"../public")));

const multer=require('multer');

const storage=multer.diskStorage({
    destination:(req,file,cb)=>{
        cb(null,"./Images")
    },
    filename: (req,file,cb)=>{
        console.log(file)
        cb(path.extname(file.originalname));
        console.log("---")
    }
});

const upload=multer({storage:storage});

app.post("/upload",upload.single('image'),(req,res)=>{
    console.log("up")
});

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname,'../public/index.html'));
  });

server.listen(3000, () => {
  console.log('listening on *:3000');
});

运行日志 #

listening on *:3000
{
  fieldname: 'image',
  originalname: 'vidLogo.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg'
}
---

错误响应内容 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>.jpg</pre>
</body>
</html>

错误原因 #

问题出在multer.diskStorage的filename回调函数中，cb函数的参数使用错误：
cb函数的第一个参数必须是错误对象（正常情况下传null表示无错误），第二个参数才是要生成的文件名。你直接将path.extname(file.originalname)的结果（即.jpg）作为第一个参数传入，导致这个字符串被当成错误抛出，服务器因此返回500内部错误，响应中的.jpg就是这个错误信息。

另外需要注意：如果./Images目录不存在，Multer也会抛出错误，需要确保该目录已创建。

修复方案 #

1. 修正filename回调中的cb调用，正确传入参数：
   • 保留原文件名：cb(null, file.originalname)
   • 避免文件名重复（添加时间戳前缀）：cb(null, Date.now() + path.extname(file.originalname))
2. 确保./Images目录存在，可手动创建，或在代码中添加自动创建逻辑。

修改后的server.js关键代码 #

const storage=multer.diskStorage({
    destination:(req,file,cb)=>{
        // 自动创建Images目录（可选）
        const fs = require('fs');
        const dir = './Images';
        if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir);
        }
        cb(null, dir)
    },
    filename: (req,file,cb)=>{
        console.log(file)
        // 可选：用原文件名
        cb(null, file.originalname);
        // 可选：用时间戳避免重名
        // cb(null, Date.now() + path.extname(file.originalname));
        console.log("---")
    }
});

// 上传接口添加响应，避免客户端超时
app.post("/upload",upload.single('image'),(req,res)=>{
    console.log("up")
    res.status(200).send('上传成功');
});

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