文件上传---FormData格式的传参

2024-06-03 01:57:22

一般前端做 文件导入功能 / 上传功能 的时候会用到Formdata的格式，来上传文件和数据。

会比较常用的两种方式：

let formData = new FormData(); // 当前为空

1. 直接表单传值

可以使用FormData.append来添加键/值对到表单里面；

//传数值
formData.append('name', id);
//传文件
formData.append('files', file);

2. 后端的多部分传参

和后端接口保持统一，那么可能不全是表单格式的数据，可能设置的不同的格式，比如文件格式的文件和数据格式的数值，因此需要带格式传过去（new Blob方法）。

//传文件
formData.append('file-data', file);
//传数据（元数据格式）
formData.append('meta-data',new Blob([JSON.stringify(data)], { type: 'application/json' }) )

方法拓展：

1. FormData 对象将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据key/value，而独立于表单使用。如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，从而发送数据具有同样形式。

FormData.append(key,value)加数据，如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾.

FormData.append(key) 从对象中删除指定键，即 key，和它对应的值，即 value

FormData.has(key) 返回一个布尔值，表示该FormData对象是否含有某个key

FormData.getAll(key)方法会返回该 FormData 对象指定 key 的所有值。

2. Blob 表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

Blob 使用场景: 分片上传，从互联网下载数据，Blob 用作 URL，Blob 转换为 Base64，图片压缩，生成 PDF 文档

文件上传---FormData格式的传参相关推荐

python使用requests处理form-data格式的传参
python使用requests处理form-data格式的传参方法一:使用MultipartEncoder 方法二:在request中使用参数data 方法一:使用MultipartEncoder ...
2022渗透测试-文件上传漏洞的详细讲解
目录 1.什么是文件上传漏洞 2.生成图片木马 3.靶场 1.第一关 2.前端检测(第二关) 3.服务器端检测--MIME类型(第二关) 4.服务器端检测--文件类型(第十四关) 5.服务器文件内容验 ...
除了文件上传还有哪些方式可以写一句话木马？
除了文件上传还有哪些方式可以写一句话木马? 一句话木马如果上传到服务器的话,有啥危害学过网络安全的人都知道.但是通常网上流传的方式都是通过文件上传来实现木马上传,实在太过老套,这里就教大家几个新的方式 ...
太厉害了，终于有人能把文件上传漏洞讲的明明白白了
大家好! 我是小黄,很高兴又跟大家见面啦 ! 拒绝水文,从我做起 !!!! 未经允许,禁止转载 ,违者必究!!!! 本实验仅适用于学习和测试 ,严禁违法操作 ! ! ! 今天更新的是: P7 漏洞类型 ...
formdata格式
日常与后台对接时,一般数据格式都是data数据传参,但偶尔也是有例外:文件上传等需要我们去使用formdata格数传参,那么应该怎么去进行接口访问呢? 因为方法比较常见,所以对formdata格式进行 ...
python模拟浏览器上传文件_Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)...
http协议本身的原始方法不支持multipart/form-data请求,这个请求由原始方法演变而来的. multipart/form-data的基础方法是post,也就是说是由post方法来组合实 ...
小程序使用formdata格式传参
在开发过程中后端要求使用formdata格式传参,试了下发现小程序不能new formData,上网查了查,微信开放社区找到了解决方法,原文之路:使用wx.request发送multipart/for ...
formdata传递参数_前端利用formData格式进行数据上传，前端formData 传值和 json传值的区别？...
contentType 常见的格式 text/plain :纯文本格式 application/json: JSON数据格式 application/x-www-form-urlencoded 中默认 ...
HTML地址栏传数据和json区别,前端利用formData格式进行数据上传，前端formData 传值和 json传值的区别？...
contentType 常见的格式 text/plain :纯文本格式 application/json: JSON数据格式 application/x-www-form-urlencoded 中默认 ...

最新文章

热门文章