db.json我发布到我的db.json的图像文件丢失。
const createPost = async (title, image, description) => {
const data = new FormData();
data.append('title', title);
data.append('image', image);
data.append('description', description);
const response = await axios.post('http://localhost:3001/posts', data, {
headers: {
'Content-Type': 'application/json',
},
});
const updatedPosts = [...posts, response.data];
setPosts(updatedPosts);
};
export const Form = ({ createPost }) => {
const [image, setImage] = useState(null);
const submitForm = (e) => {
e.preventDefault();
createPost(title, image, description);
setImage('');
setTitle('');
setDescription('');
};
const uploadImage = (e) => {
const file = e.target.files[0];
setImage(file);
};
return (
<form onSubmit={submitForm} encType="multipart/form-data">
<div className="image">
<label>Import Image</label>
<input type="file" accept="image/*" onChange={(e) => uploadImage(e)} />
</div>
<div className="action">
<Button className="button">Create</Button>
</div>
</form>
);
};
我想将我的数据发布到我的服务器。但是,我的db.json中只缺少一个图像文件。我修复代码的更好方法是什么?
3条答案
按热度按时间plupiseo1#
我认为你头的内容类型必须是multipart/form-data,或者你必须将你的图像转换为base64字符串,而不需要将它添加到表单数据中,如果你使用express,你可能必须使用bodyparserer和fs包太多。
ie3xauqp2#
onChange
只接受函数名。所以,修改这个到
因为你已经在前面的代码中定义了
uploadImage
函数。yyyllmsg3#
我不知道,但我认为你的问题是在后端代码。但是,尝试更改
data.append
的顺序,将data.append(file)
移动到最后。如果不工作,请给我看你的后端代码。(如何生成db.json文件)