Node.js中使用Multer上传头像无法生成可读取文件的问题求助

你好呀！我仔细看了你的代码和描述的问题，发现几个关键的小问题导致了上传的文件异常，咱们一个个来解决：

问题1：自定义的storage配置没生效，还存在拼写错误 #

你已经定义了diskStorage来指定文件存储路径和自定义文件名，但初始化multer的时候用的是multer({ dest: "/pfps" })——这相当于完全忽略了自己写的storage配置，而且/pfps是绝对路径，大概率不是你项目里的目标目录。另外，你写的filenane是拼写错误，正确的应该是filename，这直接导致你的自定义文件名逻辑根本没执行！

问题2：获取上传文件的方式不对 #

你用的是upload.single('avatar')（单文件上传），所以应该通过req.file来获取文件信息，而不是req.files（这个是多文件上传场景下使用的），这就是为什么你打印req.files会得到undefined的原因。

修复后的完整后端代码 #

咱们把这些问题都修正，同时加上文件夹自动创建的逻辑（避免因为目标文件夹不存在导致上传失败），代码如下：

const express = require("express");
const sqlite3 = require("sqlite3").verbose();
const db = new sqlite3.Database(".database/user.db")
var fs = require('fs');
const cors = require("cors");
var bodyParser = require('body-parser');

const path = require("path");
const multer = require("multer");

// 确保目标上传文件夹存在，不存在则自动创建
const uploadDir = path.join(__dirname, 'myPWA/pfps');
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });
}

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, uploadDir) // 使用绝对路径更稳妥
    },
    filename: (req, file, cb) => { // 修正拼写错误：filenane → filename
        console.log(file);
        cb(null, Date.now() + path.extname(file.originalname))
    }
})

// 使用自定义的storage配置，而非默认的dest
const upload = multer({ storage: storage });

const app = express();
app.use(express.static(path.join(__dirname, "myPWA")));

app.get("/", function (req, res) {
    res.sendFile(path.join(__dirname, "myPWA/index.html"));
});

app.use(cors());
app.use(express.json());

app.use(
    bodyParser.urlencoded({
    extended: true
    }),
    express.static(path.join(__dirname, "myPWA"))
)

app.post('/profile', upload.single('avatar'), function (req, res) {
    console.log(req.body); // 若表单只有文件字段，这里会是空对象，属于正常情况
    console.log(req.file); // 现在能拿到完整的文件信息啦
    res.send("文件上传成功！");
})

// 启动服务器（补充你原来代码缺失的部分）
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器运行在 http://localhost:${PORT}`);
})

额外说明 #

你的前端表单已经正确设置了enctype="multipart/form-data"，这部分没问题，不需要修改。

现在重新测试，上传的文件会带有正确的后缀名，能正常打开，控制台也会打印出req.file的详细信息啦！

备注：内容来源于stack exchange，提问作者Lenis Wu