表格要求，不工作。在服务器中未定义(HTML、JS、EXPRESS、节点、MONGODB)
表格要求，不工作。在服务器中未定义(HTML、JS、EXPRESS、节点、MONGODB)
提问于 2021-12-18 07:39:56
我在一个前端和后端的应用程序中工作，我的后端用nodejs编写，使用express、multer和mongoose，当我通过postman发送数据时，它工作得很好，但是当我在我的客户端尝试使用html、css和vanilla javascript发出的相同请求时，它就不起作用了，它给了我以下错误：
TypeError:无法读取未定义的属性“路径”(指向管理特定实体连接的网络文件)。
尽管上面提到了错误，我一直试图从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();
}我完全听从你的建议，谢谢你的同事们。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-18 08:07:30
您需要为name提供<input type="file">。它必须与upload.single('file')匹配。
<input id="image" name="file" value="Subir" placeholder="Subir Archivo" type="file" required>在Express 4中，默认情况下，req对象上不再可以使用req.file。我看到您正在使用multer中间件来处理这个问题。当您尝试访问network.js时，错误可能来自req.file.path中的multer。req.file未定义，因为upload.single('file')正在寻找名为file的表单数据，而且表单输入中没有name="file"。
-编辑-
我现在看到，您没有尝试用本机HTML发送文件(现在我的回答应该适用)，您正在收听submit按钮单击以在XMLHttpRequest中发送panel-script.js。只有XHR FormData API才支持用XMLHttpRequest发送XMLHttpRequest(这只对新浏览器可用)。如果您想继续使用panel-script.js：通过XMLHttpRequest将文件作为多部分发送，请参见这里的答案
在您的情况下，您必须使用：
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);Stack Overflow用户
发布于 2021-12-18 23:34:42
刚刚解决了问题，添加了来自DSander的响应，实际上我需要将这个名称放在html标记中，我不知道它是否正确，但解决问题的是删除html中的脚本标记，所以它不使用我编写的发送方法。
评论：
<script defer src="panel-script.js"></script>并停止使用panel-script.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70401742
复制相关文章
相似问题
腾讯云开发者
