节点 js (multer) req.file 和 req.files 在 react js 中总是未定义但与模板引擎一起工作正常

Question

我正在尝试使用 Multer 将图像上传到我的服务器。如果我使用任何模板引擎，req.file和req.files 工作正常。但是当我尝试在反应中使用 postman 或 jsx 形式 上传图像时，它 returns undefined.

我正在使用：穆尔特 - 1.4.2 快递 - 4.17.1 节点 - 14.16.1

server.js

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const path = require("path");
const app = express();
const port = 5000;
//Routes Import
const data = require("./routes/router");

//Database Connection
mongoose
  .connect("mongodb://localhost/newConnectSix", {
   useNewUrlParser: true,
   useUnifiedTopology: true,
   useCreateIndex: true,
})
.then(console.log("connected!"));

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

//Route
app.use("/", data);

//Listening the port
app.listen(port, () => {
console.log(`Listening to ${port}`);
});

multer.js

const multer = require("multer");

//set storage
var storage = multer.diskStorage({
 destination: function (req, res, cb) {
 cb(null, "uploads");
 },
filename: function (req, file, cb) {
  var ext = file.originalname.substr(file.originalname.lastIndexOf("."));
  cb(null, file.fieldname + "-" + Date.now() + ext);
},
});

module.exports = store = multer({ storage: storage });

router.js

const express = require("express");
const store = require("../middleware/multer");
const router = express.Router();

router.post("/uploadmultiple", store.array("images", 12), (req, res) => {
  const files = req.files;
  console.log(req.files);
});

module.exports = router;

form.jsx

<form
  onSubmit={handleSubmit}
  action="/uploadmultiple"
  encType="multipart/form-data"
  method="POST"
>
<label htmlFor="">Upload images:</label>
  <input
   name="images"
   type="file"
   className="form-control"
   multiple
   />
/>

处理提交函数

const apiEndpoint = "http://localhost:5000/uploadmultiple";

const handleSubmit = async (e) => {
e.preventDefault();
await axios.post(apiEndpoint);
};

Answer 1

您正在使用 onSubmit 和 e.preventDefault() 控制表单提交，但不使用 axios 发送表单。您有两个选择：

要么删除 onSubmit 处理程序，让浏览器为您执行请求：

render() {
  return (
    <form
      action="/uploadmultiple"
      encType="multipart/form-data"
      method="POST"
    >
    // ...
  );
}

或者通过构建表单并使用 axios 发送来自己完成请求：

const handleSubmit = async (e) => {
  e.preventDefault();

  const form = new FormData();
  for (const file of e.target.files) {
    form.append('images', file);
  }

  await axios.post(apiEndpoint, form, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  });
};

节点 js (multer) req.file 和 req.files 在 react js 中总是未定义但与模板引擎一起工作正常

Node js (multer) req.file and req.files always undefined in react js but working fine with templating engines

node.js

reactjs

postman

multer