如何使 onSubmit 的反应与表单的 action/method 相同？

Question

我正在尝试使用 multer 将文件保存到服务器，但我希望表单通过 onSubmit 保存文件，而不是通过表单的 method/action 发布。

这可能吗？

在下面的示例中，我使用 method/action 发布到服务器并且它运行良好。

 <form
    action="<URL>"
    method="POST"
    encType="multipart/form-data"
    // onSubmit={documentUpload}
    className="upload-files"
   >
   <input type="file" name="file" />
   <button>Submit File</button>
</form>

但我希望在使用 onSubmit 时发生同样的事情。这是 documentUpload 的代码：

 const documentUpload = async () => {
    const formData = new FormData();

    await fetch("<URL>", {
      method: "POST",
      body: formData,
    });
  };

Answer 1

您可以避免使用 <form> 元素：

 <div
   className="upload-files"
 >
   <input type="file" name="file" />
   <button onClick={documentUpload}>Submit File</button>
</div>

Answer 2

找到解决方案。我必须给我的表格一个 ID：

<form
    onSubmit={documentUpload}
    className="upload-files"
    id="myForm"
  >
    <input type="file" name="file" />
    <button>Submit File</button>
  </form>

然后我必须通过 ID 获取表单并将其推送到 FormData 的第一个参数中：

const documentUpload = async (e) => {
let myForm = document.getElementById("myForm");
const formData = new FormData(myForm);

await fetch("<URL>", {
  method: "POST",
  body: formData,
});};

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

如何使 onSubmit 的反应与表单的 action/method 相同？

How can I make onSumbit react the same as action/method of a form?

html

javascript

node.js

express

reactjs