如何将HTML5 FormData对象转换为前端javascript的原始负载?

Question

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

但是当主体是一个FormData对象时，特别是当它包含一个文件blob时，是否有任何简单的方法来实现它?

这样做的原因是我想使用axios请求拦截器对整个请求体进行AES加密。

例如:

我想转换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() );
})();