基于form-data请求格式详解


Posted in Javascript onOctober 29, 2019

最近一直都比较忙,坚持月月更新博客的计划不得中止了,今天抽出点时间来说说最近项目中遇到的一个问题,有关request post请求格式中的multipart/form-data格式。

引言

最近在参与一个项目过程中遇到一个问题,相信大部分人都遇到过:

在后端与前端约定好application/json格式传递数据时,因为后台是go强类型语言,在定义api接口时,某些字段要求是整型类型,但是对于前端来说输入框或者从url中的search取到的参数都是字符串,不得不进行前端类型转换。

咋一看,对于接口参数比较少的api前端转换没有什么,但是对于一般的交互复杂,参数比较多的接口,要对大部分参数进行类型转换就是一种吃力不讨好的活。好在后端同学还支持另一种的前后端数据交互格式,即multipart/form-data。通过该格式后端取到前端传递的数据就是数字了(即使前端传递的是字符串),而不像json格式获取的是字符串。这样,就不需要额外对前端获取的数据进行特殊转换了。下面就来说说form-data。

form-data请求格式

multipart/form-data是基于post方法来传递数据的,并且其请求内容格式为Content-Type: multipart/form-data,用来指定请求内容的数据编码格式。另外,该格式会生成一个boundary字符串来分割请求头与请求体的,具体的是以一个boundary=${boundary}来进行分割,伪码如下:

...
Content-Type: multipart/form-data; boundary=${boundary} 

--${boundary}
...
...

--${boundary}--

上面boundary=${boundary}之后就是请求体内容了,请求体内容各字段之间以--${boundary}来进行分割,以--${boundary}--来结束请求体内容。

具体可以参考下面例子:

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyb1zYhTI38xpQxBK

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="city_id"

1

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="company_id"

2
------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryyb1zYhTI38xpQxBK--

form-data格式一般是用来进行文件上传的。使用表单上传文件时,必须让

表单的 enctype 等于 multipart/form-data,因为该值默认值为application/x-www-form-urlencoded。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); 
fetch('/users', {
 method: 'POST',
 body: formData
})

上面创建了一个FormData对象,通过fetch进行ajax请求时,会自动为其将其转为form-data格式,无需手动添加格式。

对象转FormData对象

对于FormDat对象,像上面那种形式可以直接添加参数比较方便,但是对于对象或者嵌套对象:

let userObj = {userName: 'xxx', age: '21'} formData.append('user', userObj)

上面形式添加formData参数user,并不会获取到其真正的内容,而是返回userObj的Object.prototype.toString.call(userObj)的值作为user字段的值。

------WebKitFormBoundaryyb1zYhTI38xpQxBK
Content-Disposition: form-data; name="user"

[object Object]

遗憾的是,FormData对象没有像JSON.stringify那样的方法能批量将对象形式转换为对应的形式,formData而言是将对象的key转换为正确formData请求参数字段名,例如如下对象:

var obj = {
  a: '2', 
  b: {c: 'test'}, 
  c: [ 
    {id: 1, name: 'xx'}, 
    {id:2 ,name: 'yy', info: {d: 4} }
  ]
}

这样转换为FormData对象时,其对应的key应该是下面这样的:

a: 2
b[c]: test
c[][id]: 1
c[][name]: xx
c[][id]: 2
c[][name]: yy
c[][info][d]:4

这样,就需要我们自己手动来实现一个转换数据函数,具体代码如下:

function objectToFormData (obj, form, namespace) {
 const fd = form || new FormData();
 let formKey;
 
 for(var property in obj) {
   if(obj.hasOwnProperty(property)) {
    let key = Array.isArray(obj) ? '[]' : `[${property}]`;
    if(namespace) {
     formKey = namespace + key;
    } else {
     formKey = property;
    }
   
    // if the property is an object, but not a File, use recursivity.
    if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
     objectToFormData(obj[property], fd, formKey);
    } else {
     
     // if it's a string or a File object
     fd.append(formKey, obj[property]);
    }
    
   }
  }
 
 return fd;
  
}

这样,就可以将对象转化为对应的formData的格式了。

以上这篇基于form-data请求格式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
accesskey 提交
Jun 26 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
简单的jQuery入门指引
Jul 28 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 #Javascript
JS操作字符串转数字的常见方法示例
Oct 29 #Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 #Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 #Javascript
JS操作json对象key、value的常用方法分析
Oct 29 #Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python实现网站的模拟登录
2016/01/04 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
使用python实现滑动验证码功能
2019/08/05 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python 实现控制鼠标键盘
2020/11/27 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
思想品德自我鉴定
2013/10/12 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
安全责任书模板
2014/07/22 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2014年路政工作总结
2014/12/10 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书