图像请求"/>
从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上传图像请求
发布评论