如何使用前端 javascript 将 HTML5 FormData 对象转换为原始负载？

Question

在我的浏览器端脚本中，我想获取整个 POST 请求负载流。

但是当正文是一个 FormData 对象时，尤其是当它包含一个文件 blob 时，有没有简单的方法来制作它？

The reason for doing this is that I want to make AES encrypt on the whole request body, using axios request interceptor.

例如：

我要转换 FormData 对象：

const fd = new FormData()
fd.append('example.png', file) // here file is a file object from the file input object

进入以下内容：

------WebKitFormBoundaryMV9GYQ2pcwRJ6XAA
Content-Disposition: form-data; name="image"; filename="example.png"
Content-Type: image/png
<<blob bytes>>

------WebKitFormBoundaryMV9GYQ2pcwRJ6XAA--

是否有任何简单的方法来制作它或任何现有的 npm 包？

Answer 1

我不确定它是否真的有助于您的最终目标，但是对于您所要求的，您可以从此 FormData 创建一个新的 Response 对象并将其作为纯文本使用：

(async () => {
  const file = await new Promise((res) => document.createElement('canvas').toBlob(res));
  const fd = new FormData();
  fd.append('example.png', file, 'example.png');
  const resp = new Response(fd);
  console.log( await resp.text() );
})();

如何使用前端 javascript 将 HTML5 FormData 对象转换为原始负载？

How to convert HTML5 FormData object to raw payload with frontend javascript?

html

javascript

multipartform-data

npm

ecmascript-6