浏览器控制台中打印请求体携带参数

写分片上传时遇到首个请求没有荷载(payload)标签，以下三种方法，直接复制到控制台中执行后，重复请求：

拦截 FormData.append

// 在 Console 中粘贴运行
(function() {
  const origAppend = FormData.prototype.append;
  FormData.prototype.append = function(key, value, filename) {
    console.log("[FormData]", key, value, filename || "");
    return origAppend.apply(this, arguments);
  };
})();

 

方法二：拦截 fetch 请求

// 在 Console 中粘贴运行
(function() {
  const origFetch = window.fetch;
  window.fetch = async function(input, init) {
    console.log("[Fetch URL]", input);
    if (init && init.body instanceof FormData) {
      for (let pair of init.body.entries()) {
        console.log("[Fetch FormData]", pair[0], pair[1]);
      }
    } else if (init && init.body) {
      console.log("[Fetch Body]", init.body);
    }
    return origFetch.apply(this, arguments);
  };
})();

 

方法三：拦截 XMLHttpRequest（有些上传库用的不是 fetch）

// 在 Console 中粘贴运行
(function() {
  const origSend = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function(body) {
    if (body instanceof FormData) {
      console.log("[XHR FormData]");
      for (let pair of body.entries()) {
        console.log("  ", pair[0], pair[1]);
      }
    } else if (body) {
      console.log("[XHR Body]", body);
    }
    return origSend.apply(this, arguments);
  };
})();