为什么 req.body 为空且 req.files 未定义

Question

我正在使用 node 和 express，我正在尝试使用表单上传一些文件和一些信息。问题是当我尝试从后端访问表单中的任何内容时，它是未定义的或为空的。当我使用 req.body 时，它是空的，当我尝试使用 req.files 时，它们是未定义的，所以我不知道该怎么做。这是代码：

routerProgress.post("/home/upload-progress", (req, res) => {
  const user_id = req.user.id;
  console.log(req.body);
  const weight = req.body.weight;
  const front = req.files.front;
  const from_side = req.files.from_side;
  const backwards = req.files.backwards;
  let front_id = `${v4()}-${front.file.name}`;
  let from_side_id = `${v4()}-${from_side.file.name}`;
  let backwards_id = `${v4()}-${backwards.file.name}`; 
  const date = dateFormat(result.request_date, "yyyy-mm-dd");

  from.mv('../../uploads/images', front_id, (req, res) => {
    if (err) console.log(err);
    else console.log("File Uploaded");
  })

  from_side.mv('../../uploads/images', from_side_id, (req, res) => {
    if (err) console.log(err);
    else console.log("File Uploaded");
  })

  backwards.mv('../../uploads/images', backwards_id, (req, res) => {
    if (err) console.log(err);
    else console.log("File Uploaded");
  })

  const newProgress = new Progress ({
    user_id,
    weight,
    front_id,
    from_side_id,
    backwards_id,
    date
  })

  res.redirect("/home");
});

console.log 只有 {}，req.files.name_defined_in_form 未定义。

这是我的 app.js

import express from 'express';
const app = express();
import path from 'path';
import sequelize from './db/db.js';
import { fileURLToPath } from 'url';
import flash from 'connect-flash';
import session from 'express-session';
import passport from 'passport';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// SERVER CONFIGURATION
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Listening at ${PORT}`);
  sequelize.sync({ force: false })
    .then(() => console.log('Database Connected!'))
    .catch(err => console.log(err));
});

// VIEW SETTINGS
app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");
// app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, "/public/views"));

// BODYPARSER
app.use(express.urlencoded({ extended: false }));
app.use(express.json());


// EXPRESS SESSION

app.use(session({
  secret: 'GymApp',
  resave: true,
  saveUninitialized: true
}));

// CONNECT FLASH
app.use(flash());


// PASSPORT MIDDLEWARE
import passportConfig from './config/passport.js';
passportConfig(passport);
app.use(passport.initialize());
app.use(passport.session());


// GLOBAL VAR
app.use((req, res, next) => {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  next();
});

// ROUTES
import { routerIndex } from './routes/index.js';
import { routerProgress } from './routes/app/progress.js';
import { routerAuthentication } from './routes/authentication.js';
import { routerHome } from './routes/app/home.js'

app.use(routerIndex);
app.use(routerProgress);
app.use(routerAuthentication);
app.use(routerHome);

这是用 pug 完成的表格：

form(class="form add-form space-down" method="POST" enctype="multipart/form-data")
                div.title
                    h1 UPLOAD NEW PROGRESS 
                    div.form-group
                        label(for="weight") Weight: 
                        input(type="number" name="weight" class="form-control" placeholder="Enter your weight")
                    div.form-group
                        label(for="front") Upload a front photo 
                        input(type="file" name="front")
                    div.form-group
                        label(for="from_side") Upload a from side photo 
                        input(type="file" name="from_side")
                    div.form-group
                        label(for="backwards") Upload a backwards photo 
                        input(type="file" name="backwards")
                    div.button-container
                        button(type="submit" class="btn btn-primary btn-color space") Upload

如果有人知道我应该如何解决这个问题，我会非常感谢他。

Answer 1

为了访问req.files 对象，您需要添加一个名为express-fileupload 的特定中间件以允许此功能。

只需运行npm i express-fileupload，然后将其添加到您的app.js，如下所示：

const fileUpload = require('express-fileupload');
app.use(fileUpload());

在您特定的app.js 中，您可以将其添加到您的其他中间件附近，例如：

import express from 'express';
const app = express();
import path from 'path';
import sequelize from './db/db.js';
import { fileURLToPath } from 'url';
import flash from 'connect-flash';
import session from 'express-session';
import passport from 'passport';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// SERVER CONFIGURATION
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Listening at ${PORT}`);
    sequelize.sync({ force: false })
        .then(() => console.log('Database Connected!'))
        .catch(err => console.log(err));
});

// FILE UPLOAD
const fileUpload = require('express-fileupload');
app.use(fileUpload());

// VIEW SETTINGS
app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");
// app.engine('html', require('ejs').renderFile);
app.set('views', path.join(__dirname, "/public/views"));

// BODYPARSER
app.use(express.urlencoded({ extended: false }));
app.use(express.json());


// EXPRESS SESSION

app.use(session({
    secret: 'GymApp',
    resave: true,
    saveUninitialized: true
}));

// CONNECT FLASH
app.use(flash());


// PASSPORT MIDDLEWARE
import passportConfig from './config/passport.js';
passportConfig(passport);
app.use(passport.initialize());
app.use(passport.session());


// GLOBAL VAR
app.use((req, res, next) => {
    res.locals.success_msg = req.flash('success_msg');
    res.locals.error_msg = req.flash('error_msg');
    res.locals.error = req.flash('error');
    next();
});

// ROUTES
import { routerIndex } from './routes/index.js';
import { routerProgress } from './routes/app/progress.js';
import { routerAuthentication } from './routes/authentication.js';
import { routerHome } from './routes/app/home.js'

app.use(routerIndex);
app.use(routerProgress);
app.use(routerAuthentication);
app.use(routerHome);

通过app.use() 安装和实现中间件后，req.files 对象现在应该可以访问了，前提是您从表单中正确传递了文件。