代码之家 › 专栏 › 技术社区 › Alfred Huang

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

multipartform-data ecmascript-6 npm html javascript

Alfred Huang · 技术社区 · 4 年前

但是,当主体是一个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包?

1 回复 | 直到 4 年前

Kaiido 4 年前

我不确定这是否真的有助于你的最终目标,但对于你所要求的,你可以创造一个新的目标 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() );
})();

推荐文章

mustafa · 如何使用vapor客户端发送多部分表单数据请求

1 年前

Jithesh Kumar · 如何在flutter中将图像和其他数据一起发送到服务器formdata

1 年前

trogwar · Guzzle中的Mimic curl工作脚本(多部分数据和二进制上传一起)

2 年前

Dave · 如何创建一个NestJS端点,该端点除了一个字符串字段外,还接受两个文件?

2 年前

Y.O.AK · Multipart:使用nestjs意外结束表单

2 年前

Lord Vordemolt · Rust-reqwest::multipart::Form不工作

2 年前

Awais Fayyaz · 在swift中使用多部分/表单数据上传带参数的图像

7 年前

mahan · 将文件从AngularJS控制器上载到Kotlin中的Spring writtin

7 年前

twocents · 在多部分/表单数据POST请求节点| Express |请求中发送缓冲区

7 年前

LEJ · 使用Axios将文件发送到Spring Boot REST

7 年前