基于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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
Jan 08 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
解决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
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Python fileinput模块使用介绍
2014/11/30 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python学习开发mock接口
2019/04/28 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
internal修饰符起什么作用
2013/12/16 面试题
小学生考试获奖感言
2014/01/30 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
管理工程专业求职信
2014/08/10 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
党员查摆剖析材料
2014/10/10 职场文书
批评与自我批评范文
2014/10/15 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
格林童话读书笔记
2015/06/30 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python