从React上传图像请求

admin管理员组

文章数量:814911

从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上传图像请求