我在一個有前端和后端的應用程式中作業，我的后端用 nodejs 撰寫，使用 express、multer 和 mongoose，當我通過郵遞員發送資料時作業得很好，但是一旦我在我的客戶端中嘗試相同的請求用 html、css 和 vanilla javascript 制作，它不起作用，它給了我以下錯誤：
型別錯誤：無法讀取未定義的屬性“路徑”（指向我管理特定物體連接的網路檔案）。
盡管出現了上面提到的錯誤，我一直在嘗試將一個檔案和一個字串從 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（應該發送發布請求的表單所在的位置）
<!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 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();
}
我全神貫注于您的建議，在此先感謝開發人員。
uj5u.com熱心網友回復：
您需要name為<input type="file">. 它必須匹配upload.single('file')。
<input id="image" name="file" value="Subir" placeholder="Subir Archivo" type="file" required>
在 Express 4req.file中，默認情況下 req 物件不再可用。我看到你正在使用multer中間件來處理這個問題。該錯誤可能從multer進來network.js當您嘗試訪問req.file.path。將req.file是不確定的，因為upload.single('file')是尋找一個名為表單資料file，而不必name="file"在表單輸入。
uj5u.com熱心網友回復：
如果你在本地環境中作業，我相信動作部分需要更改 action="http://localhost:3000/banner" 使其指向處理表單的檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384949.html
標籤：javascript html 节点.js 表达 http请求
上一篇：使用XPath獲取SVG中的元素
下一篇：如何通過控制臺觸發沒有ID的鏈接