javascript - 在 JavaScript 中获取 HTTP 表单主体

Question

是否可以在 Javascript 中获取在提交表单时发送的结果 HTTP 请求的 HTTP Body 的内容？

假设我有一个“POST”类型的表单，其中包含文件输入和一些其他输入字段以及“multipart/form-data”的 enctype 属性。我想获取浏览器将生成的请求的逐字 HTTP 正文和 HTTP header 如果我提交了表单(没有实际提交)。

Answer 1

您可以使用 Response，Response.body.getReader() 这是一个 ReadableStream 来读取 FormData< 的内容 对象。使用 TextDecoder 将 Uint8Array 转换为可读文本。请注意，您不能从同一个 Response 对象中读取流和 header 。尽管您可以从相同的输入数据和读取的 Headers

创建一个新的 Response 对象

var form = document.querySelector("form");
form.onsubmit = (e) => {
  e.preventDefault();
  var formData = new FormData();
  var input = e.target.querySelector("input");
  formData.append("file", input.files[0], input.files[0].name);

  var response = new Response(formData);
  var stream = response.body;
  var reader = stream.getReader();
  var decoder = new TextDecoder();
  reader.read()
    .then(function processData(result) {
      if (result.done) {
        console.log("stream done");
        return;
      }
      var data = decoder.decode(result.value);
      console.log(data);

      return reader.read().then(processData);
    })
    .catch(function(err) {
      console.log("catch stream cancellation:", err);
    });

  reader.closed.then(function() {
    console.log("stream closed");
  });
}

<form method="POST" enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="submit">
</form>