Getting this error , when trying to upload images through a form "TypeError: Cannot read property 'originalname' of undefined "
Getting this error , when trying to upload images through a form "TypeError: Cannot read property 'originalname' of undefined "
我的代码出现问题，我已经搜索了好几天了。我是 MERN 堆栈的新手，需要你们任何人的支持 :( 。下面的代码用于以表格形式上传 2 张图像和其他数据。
客户端编码
import styles from "../assets/css/AddItinerary.module.css";
import axios from "axios";
import { useState, useEffect } from "react";
import IndexHeader from "components/Headers/IndexHeader";
import IndexNavbar from "components/Navbars/IndexNavbar";
import { Label, Input, Button } from "reactstrap";
function AddItinerary() {
const [itineraryId, setitineraryId] = useState("");
const [itineraryDays, setitineraryDays] = useState("");
const [itineraryName, setitineraryName] = useState("");
const [itineraryDesc, setitineraryDesc] = useState("");
const [Filename1, setitineraryImage] = useState("");
const [Filename2, setitineraryCoverImage] = useState("");
const [itineraryClass, setitineraryClass] = useState("");
const [itineraryPriceAdult, setitineraryPriceAdult] = useState("");
const [itineraryPriceChild, setitineraryPriceChild] = useState("");
const onChangeFile = (e) => {
setitineraryImage(e.target.files[0]);
};
const onChangeFile2 = (e) => {
setitineraryCoverImage(e.target.files[0]);
};
function sendData(e) {
e.preventDefault();
const formData = new FormData();
formData.append("itineraryId", itineraryId);
formData.append("itineraryDays", itineraryDays);
formData.append("itineraryName", itineraryName);
formData.append("itineraryDesc", itineraryDesc);
formData.append("itineraryImage", Filename1);
formData.append("itineraryCoverImage", Filename2);
formData.append("itineraryClass", itineraryClass);
formData.append("itineraryPriceAdult", itineraryPriceAdult);
formData.append("itineraryPriceChild", itineraryPriceChild);
axios
.post("http://localhost:8070/itineraries/add", formData)
.then(() => {
alert("Itinerary Addded");
window.location.reload();
})
.catch((err) => {
console.log(formData);
console.log(err);
});
}
return (
<>
<IndexNavbar />
<IndexHeader />
<div style={{ paddingTop: "50px" }} className={styles.body}>
<br />
<br />
<h3 className={styles.header} style={{ textAlign: "center" }}>
Insert Tour Itinerary Details
</h3>
<br />
<br />
<div className={styles.FormContainer}>
<form onSubmit={sendData} encType="multipart/form-data">
<Label for="ItineraryID">Itinerary ID</Label>
<br />
<Input
type="text"
name="ItineraryID"
placeholder="Enter Itinerary ID"
onChange={(e) => {
setitineraryId(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryName">Itinerary Name</Label>
<br />
<Input
type="text"
name="ItineraryName"
placeholder="Enter Itinerary Name"
onChange={(e) => {
setitineraryName(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryDays">Itinerary Days</Label>
<br />
<Input
type="number"
name="ItineraryDays"
placeholder="Enter Duration of the Itinerary"
onChange={(e) => {
setitineraryDays(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryDescription">Itinerary Description</Label>
<br />
<Input
type="text"
name="ItineraryDescription"
placeholder="Enter Itinerary Description"
onChange={(e) => {
setitineraryDesc(e.target.value);
}}
></Input>
<br />
<div className="form-group">
<Label htmlFor="ItineraryImage">Itinerary Image</Label>
<br />
<Input
type="file"
filename="itineraryImage"
accept="image/*"
className="form-control-file"
onChange={onChangeFile}
></Input>
<br />
</div>
<Label htmlFor="ItineraryCoverImage">Image for Card</Label>
<br />
<Input
type="file"
filename="itineraryCoverImage"
accept="image/*"
className="form-control-file"
onChange={onChangeFile2}
/>
<br />
<Label for="ItineraryClass">Select Itinerary Class</Label>
<br />
<Input
type="select"
name="ItineraryClass"
onChange={(e) => {
setitineraryClass(e.target.value);
}}
>
<option>Superior</option>
<option>Standard</option>
</Input>
<Label for="ItineraryPriceA">Itinerary Price for Adults</Label>
<br />
<Input
type="number"
name="ItineraryPriceA"
placeholder="Enter Itinerary Price for Adults"
onChange={(e) => {
setitineraryPriceAdult(e.target.value);
}}
/>
<Label for="ItineraryPriceC">Itinerary Price for Children</Label>
<br />
<Input
type="number"
name="ItineraryPriceC"
placeholder="Enter Itinerary Price for Children"
onChange={(e) => {
setitineraryPriceChild(e.target.value);
}}
/>
<Button
color="primary"
type="submit"
style={{ float: "right", margin: "5px" }}
>
Add Itinerary
</Button>
</form>
</div>
</div>
</>
);
}
export default AddItinerary;
Node.js编码（路由添加条目）
const router = require("express").Router();
const { json } = require("express");
const multer = require("multer");
let Itinerary = require("../models/Itineraries");
//Creating storage to add image files
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./images/");
},
filename: (req, file, callback) => {
callback(null, file.originalname);
},
});
const upload = multer({ storage: storage });
//Adding Itinerary
router.post(
"/add", upload.fields([
{ name: "itineraryImage", maxCount: 1 },
{ name: "itineraryCoverImage", maxCount: 1 },
]),
(req, res) => {
const newItinerary = new Itinerary({
itineraryId: req.body.itineraryId,
itineraryDays: req.body.itineraryDays,
itineraryName: req.body.itineraryName,
itineraryDesc: req.body.itineraryDesc,
itineraryImage: req.file.originalname,
itineraryCoverImage: req.file.originalname,
itineraryClass: req.body.itineraryClass,
itineraryPriceAdult: req.body.itineraryPriceAdult,
itineraryPriceChild: req.body.itineraryPriceChild,
});
newItinerary
.save()
.then(() => {
res.json("Itinerary Added");
})
.catch((err) => {
console.log(err);
});
}
);
我很抱歉这么长，但我真的需要帮助。
非常感谢你！
（下面是完整的错误）
TypeError: Cannot read property 'originalname' of undefined
at E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\routes\itineraries.js:32:35
at Layer.handle [as handle_request] (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\layer.js:95:5)
at next (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\route.js:137:13)
at Immediate.<anonymous> (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\multer\lib\make-middleware.js:53:37)
at processImmediate (internal/timers.js:466:21)
TypeError: Cannot read property 'originalname' of undefined
at E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\routes\itineraries.js:32:35
at Layer.handle [as handle_request] (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\layer.js:95:5)
at next (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\route.js:137:13)
at Immediate.<anonymous> (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\multer\lib\make-middleware.js:53:37)
at processImmediate (internal/timers.js:466:21)
要访问有关已上传文件的信息，您必须使用 req.files，然后访问每个单独的文件。
itineraryImage : req.files.itineraryImage[0].originalname,
itineraryCoverImage : req.files.itineraryCoverImage[0].originalname,
此外，您必须在 axios 中设置内容类型 post reaquest
axios.post("http://localhost:8070/itineraries/add" , formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(()=>{
alert("Itinerary Addded");
window.location.reload();
}).catch((err) =>{
console.log(formData);
console.log(err);
})
我的代码出现问题，我已经搜索了好几天了。我是 MERN 堆栈的新手，需要你们任何人的支持 :( 。下面的代码用于以表格形式上传 2 张图像和其他数据。
客户端编码
import styles from "../assets/css/AddItinerary.module.css";
import axios from "axios";
import { useState, useEffect } from "react";
import IndexHeader from "components/Headers/IndexHeader";
import IndexNavbar from "components/Navbars/IndexNavbar";
import { Label, Input, Button } from "reactstrap";
function AddItinerary() {
const [itineraryId, setitineraryId] = useState("");
const [itineraryDays, setitineraryDays] = useState("");
const [itineraryName, setitineraryName] = useState("");
const [itineraryDesc, setitineraryDesc] = useState("");
const [Filename1, setitineraryImage] = useState("");
const [Filename2, setitineraryCoverImage] = useState("");
const [itineraryClass, setitineraryClass] = useState("");
const [itineraryPriceAdult, setitineraryPriceAdult] = useState("");
const [itineraryPriceChild, setitineraryPriceChild] = useState("");
const onChangeFile = (e) => {
setitineraryImage(e.target.files[0]);
};
const onChangeFile2 = (e) => {
setitineraryCoverImage(e.target.files[0]);
};
function sendData(e) {
e.preventDefault();
const formData = new FormData();
formData.append("itineraryId", itineraryId);
formData.append("itineraryDays", itineraryDays);
formData.append("itineraryName", itineraryName);
formData.append("itineraryDesc", itineraryDesc);
formData.append("itineraryImage", Filename1);
formData.append("itineraryCoverImage", Filename2);
formData.append("itineraryClass", itineraryClass);
formData.append("itineraryPriceAdult", itineraryPriceAdult);
formData.append("itineraryPriceChild", itineraryPriceChild);
axios
.post("http://localhost:8070/itineraries/add", formData)
.then(() => {
alert("Itinerary Addded");
window.location.reload();
})
.catch((err) => {
console.log(formData);
console.log(err);
});
}
return (
<>
<IndexNavbar />
<IndexHeader />
<div style={{ paddingTop: "50px" }} className={styles.body}>
<br />
<br />
<h3 className={styles.header} style={{ textAlign: "center" }}>
Insert Tour Itinerary Details
</h3>
<br />
<br />
<div className={styles.FormContainer}>
<form onSubmit={sendData} encType="multipart/form-data">
<Label for="ItineraryID">Itinerary ID</Label>
<br />
<Input
type="text"
name="ItineraryID"
placeholder="Enter Itinerary ID"
onChange={(e) => {
setitineraryId(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryName">Itinerary Name</Label>
<br />
<Input
type="text"
name="ItineraryName"
placeholder="Enter Itinerary Name"
onChange={(e) => {
setitineraryName(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryDays">Itinerary Days</Label>
<br />
<Input
type="number"
name="ItineraryDays"
placeholder="Enter Duration of the Itinerary"
onChange={(e) => {
setitineraryDays(e.target.value);
}}
></Input>
<br />
<Label for="ItineraryDescription">Itinerary Description</Label>
<br />
<Input
type="text"
name="ItineraryDescription"
placeholder="Enter Itinerary Description"
onChange={(e) => {
setitineraryDesc(e.target.value);
}}
></Input>
<br />
<div className="form-group">
<Label htmlFor="ItineraryImage">Itinerary Image</Label>
<br />
<Input
type="file"
filename="itineraryImage"
accept="image/*"
className="form-control-file"
onChange={onChangeFile}
></Input>
<br />
</div>
<Label htmlFor="ItineraryCoverImage">Image for Card</Label>
<br />
<Input
type="file"
filename="itineraryCoverImage"
accept="image/*"
className="form-control-file"
onChange={onChangeFile2}
/>
<br />
<Label for="ItineraryClass">Select Itinerary Class</Label>
<br />
<Input
type="select"
name="ItineraryClass"
onChange={(e) => {
setitineraryClass(e.target.value);
}}
>
<option>Superior</option>
<option>Standard</option>
</Input>
<Label for="ItineraryPriceA">Itinerary Price for Adults</Label>
<br />
<Input
type="number"
name="ItineraryPriceA"
placeholder="Enter Itinerary Price for Adults"
onChange={(e) => {
setitineraryPriceAdult(e.target.value);
}}
/>
<Label for="ItineraryPriceC">Itinerary Price for Children</Label>
<br />
<Input
type="number"
name="ItineraryPriceC"
placeholder="Enter Itinerary Price for Children"
onChange={(e) => {
setitineraryPriceChild(e.target.value);
}}
/>
<Button
color="primary"
type="submit"
style={{ float: "right", margin: "5px" }}
>
Add Itinerary
</Button>
</form>
</div>
</div>
</>
);
}
export default AddItinerary;
Node.js编码（路由添加条目）
const router = require("express").Router();
const { json } = require("express");
const multer = require("multer");
let Itinerary = require("../models/Itineraries");
//Creating storage to add image files
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./images/");
},
filename: (req, file, callback) => {
callback(null, file.originalname);
},
});
const upload = multer({ storage: storage });
//Adding Itinerary
router.post(
"/add", upload.fields([
{ name: "itineraryImage", maxCount: 1 },
{ name: "itineraryCoverImage", maxCount: 1 },
]),
(req, res) => {
const newItinerary = new Itinerary({
itineraryId: req.body.itineraryId,
itineraryDays: req.body.itineraryDays,
itineraryName: req.body.itineraryName,
itineraryDesc: req.body.itineraryDesc,
itineraryImage: req.file.originalname,
itineraryCoverImage: req.file.originalname,
itineraryClass: req.body.itineraryClass,
itineraryPriceAdult: req.body.itineraryPriceAdult,
itineraryPriceChild: req.body.itineraryPriceChild,
});
newItinerary
.save()
.then(() => {
res.json("Itinerary Added");
})
.catch((err) => {
console.log(err);
});
}
);
我很抱歉这么长，但我真的需要帮助。 非常感谢你！ （下面是完整的错误）
TypeError: Cannot read property 'originalname' of undefined
at E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\routes\itineraries.js:32:35
at Layer.handle [as handle_request] (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\layer.js:95:5)
at next (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\route.js:137:13)
at Immediate.<anonymous> (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\multer\lib\make-middleware.js:53:37)
at processImmediate (internal/timers.js:466:21)
TypeError: Cannot read property 'originalname' of undefined
at E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\routes\itineraries.js:32:35
at Layer.handle [as handle_request] (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\layer.js:95:5)
at next (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\express\lib\router\route.js:137:13)
at Immediate.<anonymous> (E:\SLIITndYearnd_Semester\Backend_WonderLanka\WonderLanka_Backend\node_modules\multer\lib\make-middleware.js:53:37)
at processImmediate (internal/timers.js:466:21)
要访问有关已上传文件的信息，您必须使用 req.files，然后访问每个单独的文件。
itineraryImage : req.files.itineraryImage[0].originalname,
itineraryCoverImage : req.files.itineraryCoverImage[0].originalname,
此外，您必须在 axios 中设置内容类型 post reaquest
axios.post("http://localhost:8070/itineraries/add" , formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(()=>{
alert("Itinerary Addded");
window.location.reload();
}).catch((err) =>{
console.log(formData);
console.log(err);
})