关于前端接口的formData传参

发布时间 2023-08-24 12:03:15作者: 叶静逍

工作中遇到个简单的问题,后端提供接口需要前端用formdata 传文件和普通对象参数拼接的参数;
本来是个简单的问题,记录一下做个简单的总结顺便梳理下相关基础性知识点:


1. formdata 将数据转换成键值对进行传参, key是唯一,一个key可以对应多个value,如果是使用表单初始化,每个表单字段对应一条数据, 那么表单的name对应FormData的key,value对应FormData的value;

tips:
1. Formdata是个浏览器的内置对象
==》扩展:浏览器的内置对象还有哪些?

2. 前端使用需要通过new方式生成一个Formdata的实例,可以传入file或者blob,如果非这两种类型会被转成字符串,关于使用方法常用的有两种:
  1. js获取DOM节点 通过 new FormData(获取的DOM节点) 方式

  2. 通过append方式

	let formdata = new FormData();
	formdata.append([key], [value])
	取用的话通过
	formdata.get([key])
	formdata.getAll([key])

==> 扩展:FormData的常用方法还有哪些?

3.关于请求头设置:正常通过FormDatad对象生成实例,调用XMLHTTP请求,不需要设置header的Content-Type,因为发现data是formData的时候 XHR的适配器会强制删除Content-Type,让浏览器自行生成;

tips:
但是不同库封装不同需要自行研究,例如axios直接封装的XMLHTTP所以不用设置;而 Umi-request,请求option需要设置 requestType: 'form';
因为formdata浏览器自动设置Content-Type为 multipart/form-data的时候会自行生成一个参数boundary
image
这个 boundary 就是不同数据的一个标记字符串,formidable 解析数据时也是以这个来分块解析的;