我正在尝试使用 Nextjs 上传图片,但出现这样的错误。使用Postman时没有问题。 文件名不断返回 undefined 。 我尝试了很多解决方案,但没有得到任何结果。 我认为输入名称部分有问题
const imgChange = (e) => {
try {
let imag = document.getElementById("images");
imag.src = URL.createObjectURL(e.target.files[0]);
} catch (err) {
alert(err);
}
setImg(e.target.files[0].name);
};
const postData = async (e) => {
e.preventDefault();
let data = {
title: title,
description: desc,
image: imgs,
};
console.log(data);
try {
await axios
.post("http://localhost:8000/post", data)
.then((res) => console.log(` res = ${res.data}`));
} catch (error) {
alert(error);
}
};
var post = [];
posts.posts.posts.forEach((item) => {
post.push(item);
});
return (
<div className={styles.container}>
<form encType="multipart/form-data" method="POST">
<div className={styles.imageField}>
{imgs == null ? (
<div>
<label htmlFor="image-file" className={styles.imageLabel}>
<div className={styles.plusdiv}>
<span className={styles.plusIcon}>+</span>
</div>
</label>
</div>
) : null}
<img src=""id="images" className={imgs == null ? "" : styles.imgShow} />
<input
onChange={imgChange}
type="file"
name="image"
hidden
/>
</div>
<div className={styles.btnDiv}>
<button type="submit" className={styles.btnSubmit} onClick={postData}>
Submit
</button>
</div>
</form>