在JavaScript中获取表单的HTTP正文 [英] Get HTTP Body of Form in JavaScript

问题描述

是否有可能在Javascript中获取提交表单时发送的HTTP请求的HTTP正文的内容？ 假设我有一个带有文件输入和其他一些输入字段以及'multipart / form-data'的enctype属性的'POST'类型的表单。如果我提交了表单（而没有实际提交它），我希望获得浏览器生成的请求的最终HTTP Body和可能的HTTP Headers。

Response ， Response.body.getReader（）它是一个 ReadableStream 来读取 FormData 对象的内容。使用 TextDecoder 将 Uint8Array 转换为可读文本。请注意，您不能从同一个 Response 对象读取流和标题。虽然您可以从相同的输入数据和读取的 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 =POSTenctype =multipart / form-data> < input name =filetype =file/> < input type =submit>< / form>  

Is it possible in Javascript to get the contents of the HTTP Body of the resulting HTTP request that would be sent when a Form is submitted?

Say I have a Form of type 'POST' with a file input and some other input fields and an enctype attribute of 'multipart/form-data'. I would like to get the verbatim HTTP Body and possibly HTTP Headers of the request the browser would generate if I submitted the form (without actually submitting it).

解决方案

You can use Response, Response.body.getReader() which is a ReadableStream to read the contents of FormData object. Use TextDecoder to convert Uint8Array to readable text. Note, you cannot read stream and headers from the same Response object. Though you can create a new Response object from same input data and the read Headers

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>

这篇关于在JavaScript中获取表单的HTTP正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！