当我上传第一张图像时,没有任何内容写入formData,但是当我上传第二张图像时,它上传到“ image”值,然后第三次上传时将写到“ image2”值。好像一切都落后了。如果我忽略这一点,并继续添加信息,最后提交“ image2,image3,image4和image5”值,则不会传递。
任何帮助都很重要。谢谢!
const [formData,setformData] = useState({
year: "",make: "",model: "",price: "",image: "",image2: "",image3: "",image4: "",image5: "",hull: "",title: "",details: ""
});
const {
year,make,model,price,image,image2,image3,image4,image5,hull,title,details
} = formData;
const types = ["image/png","image/jpeg"];
const [file,setfile] = useState("");
const [fileName,setfileName] = useState("");
const onChange = e => {
setformData({ ...formData,[e.target.name]: e.target.value });
};
const onImageChange = async e => {
e.persist();
console.log(formData);
const data = new FormData();
let file = e.target.files[0];
console.log(file);
data.append("file",file);
try {
const res = await axios.post("/api/upload",data,{
headers: {
"Content-Type": "multipart/form-data"
}
});
const { fileName,filePath } = res.data;
console.log(e.target.name);
console.log(filePath);
setformData({ ...formData,[e.target.name]: res.data.filePath});
} catch (err) {
console.log("fileUpload Err");
console.log(err);
}
};
return (
<div classname="posts_area">
<form
classname="post_form"
onSubmit={e => {
e.preventDefault();
addPost({
year,details
});
}}
>
<h5 classname="create-post-title">Boat Year:</h5>
<input
name="year"
value={year}
onChange={e => onChange(e)}
placeholder="Year"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Make:</h5>
<input
name="make"
value={make}
onChange={e => onChange(e)}
placeholder="Make"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Model:</h5>
<input
name="model"
value={model}
onChange={e => onChange(e)}
placeholder="Model"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Price:</h5>
<input
name="price"
value={price}
onChange={e => onChange(e)}
placeholder="Price"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Hull Type:</h5>
<input
name="hull"
value={hull}
onChange={e => onChange(e)}
placeholder="Hull Type"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Add a title to your post:</h5>
<input
name="title"
value={title}
onChange={e => onChange(e)}
placeholder="Title"
classname="create_post_fields"
required
/>
<br />
<br />
<h5 classname="create-post-title">Other Details:</h5>
<textarea
placeholder="Ex. Has freshwater tank"
name="details"
onChange={e => onChange(e)}
classname="create_post_fields"
></textarea>
<br />
<br />
<h5 classname="create-post-title">Upload Main Image</h5>
<input type="file" name="image" onChange={ev => onImageChange(ev)} />
<br />
<br />
<h5 classname="create-post-title">Upload Secondary Images</h5>
<input type="file" name="image2" onChange={ev => onImageChange(ev)} />
<br />
<br />
<input type="file" name="image3" onChange={ev => onImageChange(ev)} />
<br />
<br />
<input type="file" name="image4" onChange={ev => onImageChange(ev)} />
<br />
<br />
<input type="file" name="image5" onChange={ev => onImageChange(ev)} />
<br />
<br />
<input type="submit" value="Submit" classname="submit_button" />
</form>
</div>
);
};