admin管理员组文章数量:814804
从React上传图像请求
我试图实现的是将包含上载图像文件的请求从客户端(反应)发送到服务器端(快速)
这里是我在服务器上创建的一个表单示例,该表单发送我应该使用React发送的数据:
<form method="post" action="post" enctype="multipart/form-data">
<input type="file" name="image" /><br /><br />
<button type="submit" name="upload">Upload</button>
</form>
这是提交的表单在上载图像时发送的对象:link
这里是React组件:
const Component = () => {
const setImageAction = async (event) => {
event.preventDefault();
const data = await fetch("http://localhost:3000/upload/post", {
method: "post",
headers: { "Content-Type": "multipart/form-data" },
body: JSON.stringify({
}),
});
const uploadedImage = await data.json();
if (uploadedImage) {
console.log('Successfully uploaded image');
} else {
console.log('Error Found');
}
};
return (
<div className="content">
<form onSubmit={setImageAction}>
<input type="file" name="image" />
<br />
<br />
<button type="submit" name="upload">
Upload
</button>
</form>
</div>
);
};
您可以看到,在React Component中,主体请求为空,因为我还没有弄清楚如何检索该文件对象。
谢谢您的帮助!
回答如下:添加此方法以捕获onChange事件:
向您的状态添加2个属性:picturePreview和pictureAsFile
本文标签: 从React上传图像请求
版权声明:本文标题:从React上传图像请求 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/biancheng/1715137019a821452.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论