Multernodejs-req.file未定義

我正在使用 Node、Express 和 ejs 以及 multer 創建一個用于上傳影像的應用程式。每次我提交表單時，req.file 都是未定義的。我花了一整天的時間進行故障排除，但無法弄清楚我做錯了什么。

HTML

<form action="/post" id="formPost" method="post" enctype="multipart/form-data">
     <input class="img-file" type="file" name="image" required>
     <input class="submit" type="submit" value="Post" />
</form>

應用程式.js

const path = require('path');
const express = require('express');
const morgan = require('morgan');
const bodyParser = require("body-parser");
const multer = require('multer');
const app = express();

app.use(express.static(path.join(__dirname, 'public')))
app.set('view engine', 'ejs'); 
app.set('views', path.join(__dirname,'resources/views'));
app.use(bodyParser.json());   
app.use(bodyParser.urlencoded({ extended: true }));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./image");
  },
  filename: function (req, file, cb) {
    console.log(req.file);

    cb(null, Date.now()   "-"   file.fieldname   ".png");
  },
});
const upload = multer({ storage: storage });
app.post("/post", upload.single("image"), (req, res) => {
      console.log(req.file);
});
app.get("/post", (req, res) => {
  res.render("post");
});
app.listen(, () => {
  console.log(`Example app listening at http://localhost:3000/login`);
});

uj5u.com熱心網友回復：

你有幾個小錯誤：首先你忘記添加port，而不是login應該添加post然后我們立即點擊正確的地址，避免錯誤Cannot GET /login

app.listen(3000, () => {
  console.log(`Example app listening at http://localhost:3000/post`);
});

專案檔案夾和檔案結構：

app.js我添加了一個簡單的錯誤處理程式到：

app.post("/post", upload.single("image"), (req, res, next) => {}

const path = require("path");
const express = require("express");
const morgan = require("morgan");
const bodyParser = require("body-parser");
const multer = require("multer");
const app = express();

app.use(express.static(path.join(__dirname, "public")));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "resources/views"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./image");
  },
  filename: function (req, file, cb) {
    console.log(req.file);

    cb(null, Date.now()   "-"   file.fieldname   ".png");
  },
});
const upload = multer({ storage: storage });

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

app.post("/post", upload.single("image"), (req, res, next) => {
  const file = req.file;
  if (!file) {
    const error = new Error("Please upload a file");
    error.httpStatusCode = 400;
    return next(error);
  }
  res.send(file);
  console.log("Success", req.file);
});

app.get("/post", (req, res) => {
  res.render("post");
});

app.listen(3000, () => {
  console.log(`Example app listening at http://localhost:3000/post`);
});

后.ejs

<form action="/post" id="formPost" method="post" enctype="multipart/form-data">
  <input class="img-file" type="file" name="image" required />
  <input class="submit" type="submit" value="Upload File" />
</form>

輸出：

選擇檔案并按上傳檔案后：

VSCode 輸出：

奇跡般有效 ;-）

標籤：节点.js 表达 多路

上一篇：使用Express會話回應本機身份驗證？

下一篇：分立原件負反饋電路分析