在我的代码中获取"无法读取未定义错误的属性"，以更新由 2 个图像组成的表单。(MERN)

Question

我一直得到这个错误:TypeError:无法读取未定义的属性" itineraryImage "

请告诉我下面的编码是否有问题。似乎问题是在后台(从邮差检查)。

这似乎是一个问题，我在这里上传的图像，它没有被后端获取。

后端Nodejs编码

//Updating Itinerary Details
router.route("/update/:id" ,upload.fields([
{ name: 'itineraryImage', maxCount: 1 },
{ name: 'itineraryCoverImage', maxCount: 1 },
])).put(async(req,res) =>{
const itinerary = req.params.id;
const itineraryId = req.body.itineraryId;
const itineraryDays = req.body.itineraryDays;
const itineraryName = req.body.itineraryName;
const itineraryDesc = req.body.itineraryDesc;
const itineraryImage = req.files.itineraryImage[0].originalname;
const itineraryCoverImage = req.files.itineraryCoverImage[0].originalname;
const itineraryClass = req.body.itineraryClass;
const itineraryPriceAdult = req.body.itineraryPriceAdult;
const itineraryPriceChild = req.body.itineraryPriceChild;
const itineraryDetails = {
itineraryId,
itineraryDays,
itineraryName,
itineraryDesc, 
itineraryImage, 
itineraryCoverImage, 
itineraryClass, 
itineraryPriceAdult,
itineraryPriceChild 
}
const update = await Itinerary.findByIdAndUpdate(itinerary,itineraryDetails).then((req,res)=>{
res.status(200).send({status : "Itinerary Updated!"})
}).catch((err) =>{
console.log(err);
res.status(500).send({status : "Error in updating itinerary"});
})
})

前端编码(反应)

import styles from '../assets/css/EditItinerary.module.css'
import IndexHeader from 'components/Headers/IndexHeader';
import IndexNavbar from 'components/Navbars/IndexNavbar';
import DemoFooter from 'components/Footers/DemoFooter';
import { useState } from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router';
import axios from 'axios';
import{
Label, 
Input,
Button
}
from 'reactstrap'


function EditItinerary(){

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 {id} = useParams();
const onChangeFile = e =>{
setitineraryImage(e.target.files[0]);
}
const onChangeFile2 = e =>{
setitineraryCoverImage(e.target.files[0]);
}
useEffect(()=>{
axios.get(`http://localhost:8070/itineraries/get/${id}`).then((res) =>[
console.log(res.data),
setitineraryId(res.data.itineraryId),
setitineraryName(res.data.itineraryName),
setitineraryDays(res.data.itineraryDays),
setitineraryDesc(res.data.itineraryDesc),
setitineraryClass(res.data.itineraryClass),
setitineraryPriceAdult(res.data.itineraryPriceAdult),
setitineraryPriceChild(res.data.itineraryPriceChild),
setitineraryCoverImage(res.data.itineraryCoverImage),
setitineraryImage(res.data.itineraryImage)

]).catch((err)=>{
console.log(err);
})
} , []);

function updateData(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.put(`http://localhost:8070/itineraries/update/${id}` , formData , {headers: {'Content-Type': 'multipart/form-data'}}).then(() =>{
alert("Itinerary Updated!");
}).catch((err) =>{
console.log(formData);
console.log(err);
})
}
return(
<>
<IndexHeader />
<IndexNavbar />
<div style = {{paddingTop : "50px"}} className = {styles.body}>
<br/><br/><h3 className = {styles.header} style = {{textAlign : 'center'}}>Edit Tour Itinerary Details</h3><br/><br/>
<div className = {styles.FormContainer}>
<form onSubmit = {updateData} encType = "multipart/form-data">
<Label for = "ItineraryID">Itinerary ID</Label><br/>
<Input type = 'text' name = "ItineraryID" placeholder = "Enter Itinerary ID" value = {itineraryId}
onChange = {(e) =>{
setitineraryId(e.target.value);
}}
></Input><br/>
<Label for = "ItineraryName">Itinerary Name</Label><br/>
<Input type = 'text' name = "ItineraryName" placeholder = "Enter Itinerary Name" value = {itineraryName}
onChange = {(e)=>{
setitineraryName(e.target.value);
}}
></Input><br/>
<Label for = "ItineraryDays">Itinerary Duration</Label><br/>
<Input type = 'number' name = "ItineraryDuration" placeholder = "Enter Duration of the Itinerary" value = {itineraryDays}
onChange = {(e) =>{
setitineraryDays(e.target.value);
}}
></Input><br/>
<Label for = "ItineraryDescription">Itinerary Description</Label><br/>
<Input type = "text" name = "ItineraryDescription" placeholder = "Enter Itinerary Description" value = {itineraryDesc}
onChange = {(e)=>{
setitineraryDesc(e.target.value);
}}
></Input><br/>
<Label for = "ItineraryImage">Itinerary Image</Label><br/>
<Input type = "file" filename = "itineraryImage" accept = "image/*" className = "form-control-file"
onChange = {onChangeFile}
></Input><br/>
<Label for = "CardImage">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" value = {itineraryClass}
onChange = {(e) =>{
setitineraryClass(e.target.value);
}}
>
<option>Deluxe</option>
<option>Standard</option>
</Input>
<Label for = "ItineraryPriceA">Itinerary Price for Adults</Label><br/>
<Input type = "String" name = "ItineraryPriceA" placeholder = "Enter Itinerary Price for Adults" value = {itineraryPriceAdult} 
onChange = {(e) =>{
setitineraryPriceAdult(e.target.value);
}}
/>
<Label for = "ItineraryPriceC">Itinerary Price for Children</Label><br/>
<Input type = "String" name = "ItineraryPriceC" placeholder = "Enter Itinerary Price for Children" value = {itineraryPriceChild}
onChange = {(e)=>{
setitineraryPriceChild(e.target.value);
}}
/>
<Button type = "submit" color = "warning" style = {{float:'right' , margin : "5px" }} >Edit Itinerary</Button>
</form>    
</div>
</div>   
<DemoFooter />
</>
);
}
export default EditItinerary;

Thank you for your attention !

Answer 1

移动上传。像这样调用put函数中的字段:

router.route("/update/:id").put(upload.fields([
{ name: 'itineraryImage', maxCount: 1 },
{ name: 'itineraryCoverImage', maxCount: 1 },
]), async(req,res) =>{
const itinerary = req.params.id;

const itineraryId = req.body.itineraryId;
const itineraryDays = req.body.itineraryDays;
const itineraryName = req.body.itineraryName;
const itineraryDesc = req.body.itineraryDesc;
const itineraryImage = req.files.itineraryImage[0].originalname;
const itineraryCoverImage = req.files.itineraryCoverImage[0].originalname;
const itineraryClass = req.body.itineraryClass;
const itineraryPriceAdult = req.body.itineraryPriceAdult;
const itineraryPriceChild = req.body.itineraryPriceChild;

const itineraryDetails = {
itineraryId,
itineraryDays,
itineraryName,
itineraryDesc, 
itineraryImage, 
itineraryCoverImage, 
itineraryClass, 
itineraryPriceAdult,
itineraryPriceChild 
}

const update = await Itinerary.findByIdAndUpdate(itinerary,itineraryDetails).then((req,res)=>{
res.status(200).send({status : "Itinerary Updated!"})
}).catch((err) =>{
console.log(err);
res.status(500).send({status : "Error in updating itinerary"});
})
})

如果这不起作用，请参阅

https://codesandbox.io/s/setup-basic-file-upload-with-node-js-server-9f5oe?file=/index.js: 688 - 802