表单 POST 请求，无效。服务器中未定义 (HTML,JS,EXPRESS,NODE,MONGODB)
Form POST request, not working. Undefined in Server (HTML,JS,EXPRESS,NODE,MONGODB)
我在一个有前端和后端的应用程序中工作，我的后端用 nodejs 编写，使用 express、multer 和 mongoose，当我通过 postman 发送数据时工作得很好，但是当我在我的客户端中尝试使用 html、css 和 vanilla javascript 发出的相同请求时，它不起作用，它给了我以下错误：
TypeError: Cannot read property 'path' of undefined (which is pointing towards my network file that manages connections for a specific entity).
尽管出现上面提到的错误，我一直在尝试将文件和字符串从 html 中的表单发送到我的节点服务器中的网络文件，但我总是得到相同的 2 左右终端错误。
这里有一些代码可以让你更好地理解。
server.js（主要入口点）
const express = require('express');
const app = express();
const server = require('http').Server(app);
const path = require('path');
const cors = require('cors');
const bodyParser = require('body-parser');
const db = require('./db');
const router = require('./network/routes');
const config = require('./config');
db(config.dbUrl);
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(`${config.publicRoute}`, express.static(path.join(__dirname, 'public')));
server.listen(config.port, function() {});
console.log(`Application listen on ${config.host}${config.port}`);
router(app);
network.js（管理“横幅”实体连接的文件）
const express = require('express');
const multer = require('multer');
const router = express.Router();
const response = require('../../network/response');
const controller = require('./controller');
const path = require('path');
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, path.join(__dirname, '../../public/files'))
},
filename: function(req, file, cb) {
cb(null, path.extname(file.originalname))
}
})
const upload = multer({ storage: storage })
router.post('/', upload.single('file'), function(req, res) {
console.log(req.body);
controller.addBanner(req.body.name, req.file, req.file.path)
.then((fullMessage) => {
response.success(req, res, fullMessage, 201);
})
.catch(e => {
response.error(req, res, 'Unexpected error', "Simulated Error", 400, e);
});
});
router.get('/', function(req, res) {
controller.getBanners()
.then((banners) => {
response.success(req, res, banners, 200);
})
.catch(e => {
response.error(req, res, 'Internal Error', 500, e);
})
});
router.delete('/:id', function(req, res) {
controller.deleteBanner(req.params.id)
.then(() => {
response.success(req, res, `Imagen con id: ${req.params.id} ,eliminada`, 200);
})
.catch(e => {
response.error(req, res, 'Internal Error', 500, e);
})
});
module.exports = router;
panel.html（据称发送 post 请求的表单所在的位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'"> -->
<link rel="stylesheet" type="text/css" href="css/panel-style.css">
<script defer src="panel-script.js"></script>
<title>Panel de Control</title>
</head>
<body>
<header>
<img src="assets/mrvapeslogo.png" alt="mrvapes logo">
<a href="index.html"></a>
</header>
<section>
<form accept-charset="UTF-8" enctype="multipart/form-data" action="../components/banner/network.js" autocomplete="off" method="GET" target="_blank">
<label for="user">Banners Activos</label><br/>
<ul class="files-container">
</ul>
</form>
<form accept-charset="UTF-8" enctype="multipart/form-data" action="http://localhost:3000/banner" autocomplete="off" method="POST" target="_blank">
<div class="container">
<div class="button-wrap">
<!-- <label class="button" for="upload">Subir</label> -->
<input type="text" id="name" placeholder="Nombre de Archivo" value="" name="name" required>
<input id="image" value="Subir" placeholder="Subir Archivo" type="file" required>
<button id="upload" name="send-post--request" value="post-request" type="submit">Enviar</button>
<!-- <input id="upload" type=" submit " value="Enviar " onclick="submit() "> -->
</div>
</div>
</form>
</section>
</body>
panel-script.js（管理http请求逻辑的客户端文件）
const upload = document.getElementById("upload");
const image = document.getElementById("image");
const title = document.getElementById("name");
upload.addEventListener("click", (e) => {
console.log('im in bro');
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open("POST", 'http://localhost:3000/banner', true);
//xhr.setRequestHeader("Accept", "multipart/form-data");
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');
var fileSent = {
"name": title,
"file": image
};
console.log(fileSent);
xhr.send(fileSent);
alert('Subida exitosa!');
})
function retrieve() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open('get', 'http://localhost:3000/banner', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
我非常乐意听取您的建议，在此先感谢其他开发人员。
您需要为 <input type="file"> 提供 name。它必须匹配 upload.single('file').
<input id="image" name="file" value="Subir" placeholder="Subir Archivo" type="file" required>
在 Express 4 中，默认情况下 req.file 在 req 对象上不再可用。我看到您正在使用 multer 中间件来处理它。当您尝试访问 req.file.path 时，错误可能来自 network.js 中的 multer。 req.file 未定义，因为 upload.single('file') 正在查找名为 file 的表单数据，而您在表单输入中没有 name="file"。
-编辑-
我现在看到您没有尝试使用本机 HTML 表单提交发送文件（现在应该可以使用我的回答），并且您正在收听提交按钮点击以发送 XMLHttpRequest 在 panel-script.js 中。仅 XHR FormData API (which is only available to new browsers). See the answer here if you wish to continue with using panel-script.js:
支持使用 XMLHttpRequest 发送 multipart/form-data
在您的情况下，您必须使用：
var formData = new FormData();
formData.append("file", document.getElementById("image").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/banner");
xhr.send(formData);
刚刚解决了问题，加上我从其他 DSander 那里得到的回复，我实际上需要把名字放到我的 html 标签中，我不知道如果它是正确的，但解决问题的方法是删除我的 html 中的脚本标记，因此它不使用我编写的发送方法。
评论了这个
<script defer src="panel-script.js"></script>
并停止使用 面板-script.js
我在一个有前端和后端的应用程序中工作，我的后端用 nodejs 编写，使用 express、multer 和 mongoose，当我通过 postman 发送数据时工作得很好，但是当我在我的客户端中尝试使用 html、css 和 vanilla javascript 发出的相同请求时，它不起作用，它给了我以下错误：
TypeError: Cannot read property 'path' of undefined (which is pointing towards my network file that manages connections for a specific entity).
尽管出现上面提到的错误，我一直在尝试将文件和字符串从 html 中的表单发送到我的节点服务器中的网络文件，但我总是得到相同的 2 左右终端错误。
这里有一些代码可以让你更好地理解。
server.js（主要入口点）
const express = require('express');
const app = express();
const server = require('http').Server(app);
const path = require('path');
const cors = require('cors');
const bodyParser = require('body-parser');
const db = require('./db');
const router = require('./network/routes');
const config = require('./config');
db(config.dbUrl);
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(`${config.publicRoute}`, express.static(path.join(__dirname, 'public')));
server.listen(config.port, function() {});
console.log(`Application listen on ${config.host}${config.port}`);
router(app);
network.js（管理“横幅”实体连接的文件）
const express = require('express');
const multer = require('multer');
const router = express.Router();
const response = require('../../network/response');
const controller = require('./controller');
const path = require('path');
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, path.join(__dirname, '../../public/files'))
},
filename: function(req, file, cb) {
cb(null, path.extname(file.originalname))
}
})
const upload = multer({ storage: storage })
router.post('/', upload.single('file'), function(req, res) {
console.log(req.body);
controller.addBanner(req.body.name, req.file, req.file.path)
.then((fullMessage) => {
response.success(req, res, fullMessage, 201);
})
.catch(e => {
response.error(req, res, 'Unexpected error', "Simulated Error", 400, e);
});
});
router.get('/', function(req, res) {
controller.getBanners()
.then((banners) => {
response.success(req, res, banners, 200);
})
.catch(e => {
response.error(req, res, 'Internal Error', 500, e);
})
});
router.delete('/:id', function(req, res) {
controller.deleteBanner(req.params.id)
.then(() => {
response.success(req, res, `Imagen con id: ${req.params.id} ,eliminada`, 200);
})
.catch(e => {
response.error(req, res, 'Internal Error', 500, e);
})
});
module.exports = router;
panel.html（据称发送 post 请求的表单所在的位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'"> -->
<link rel="stylesheet" type="text/css" href="css/panel-style.css">
<script defer src="panel-script.js"></script>
<title>Panel de Control</title>
</head>
<body>
<header>
<img src="assets/mrvapeslogo.png" alt="mrvapes logo">
<a href="index.html"></a>
</header>
<section>
<form accept-charset="UTF-8" enctype="multipart/form-data" action="../components/banner/network.js" autocomplete="off" method="GET" target="_blank">
<label for="user">Banners Activos</label><br/>
<ul class="files-container">
</ul>
</form>
<form accept-charset="UTF-8" enctype="multipart/form-data" action="http://localhost:3000/banner" autocomplete="off" method="POST" target="_blank">
<div class="container">
<div class="button-wrap">
<!-- <label class="button" for="upload">Subir</label> -->
<input type="text" id="name" placeholder="Nombre de Archivo" value="" name="name" required>
<input id="image" value="Subir" placeholder="Subir Archivo" type="file" required>
<button id="upload" name="send-post--request" value="post-request" type="submit">Enviar</button>
<!-- <input id="upload" type=" submit " value="Enviar " onclick="submit() "> -->
</div>
</div>
</form>
</section>
</body>
panel-script.js（管理http请求逻辑的客户端文件）
const upload = document.getElementById("upload");
const image = document.getElementById("image");
const title = document.getElementById("name");
upload.addEventListener("click", (e) => {
console.log('im in bro');
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open("POST", 'http://localhost:3000/banner', true);
//xhr.setRequestHeader("Accept", "multipart/form-data");
//xhr.setRequestHeader('Content-Type', 'multipart/form-data');
var fileSent = {
"name": title,
"file": image
};
console.log(fileSent);
xhr.send(fileSent);
alert('Subida exitosa!');
})
function retrieve() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open('get', 'http://localhost:3000/banner', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
我非常乐意听取您的建议，在此先感谢其他开发人员。
您需要为 <input type="file"> 提供 name。它必须匹配 upload.single('file').
<input id="image" name="file" value="Subir" placeholder="Subir Archivo" type="file" required>
在 Express 4 中，默认情况下 req.file 在 req 对象上不再可用。我看到您正在使用 multer 中间件来处理它。当您尝试访问 req.file.path 时，错误可能来自 network.js 中的 multer。 req.file 未定义，因为 upload.single('file') 正在查找名为 file 的表单数据，而您在表单输入中没有 name="file"。
-编辑-
我现在看到您没有尝试使用本机 HTML 表单提交发送文件（现在应该可以使用我的回答），并且您正在收听提交按钮点击以发送 XMLHttpRequest 在 panel-script.js 中。仅 XHR FormData API (which is only available to new browsers). See the answer here if you wish to continue with using panel-script.js:
XMLHttpRequest 发送 multipart/form-data
在您的情况下，您必须使用：
var formData = new FormData();
formData.append("file", document.getElementById("image").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/banner");
xhr.send(formData);
刚刚解决了问题，加上我从其他 DSander 那里得到的回复，我实际上需要把名字放到我的 html 标签中，我不知道如果它是正确的，但解决问题的方法是删除我的 html 中的脚本标记，因此它不使用我编写的发送方法。
评论了这个
<script defer src="panel-script.js"></script>
并停止使用 面板-script.js