基于form-data请求格式详解

最近一直都比较忙,坚持月月更新博客的计划不得中止了,今天抽出点时间来说说最近项目中遇到的一个问题,有关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请求格式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2019-10-28

Python发送form-data请求及拼接form-data内容的方法

网上关于使用python 的发送multipart/form-data的方法,多半是采用 ulrlib2 的模拟post方法,如下: import urllib2 boundary='-------------------------7df3069603d6' data=[] data.append('--%s' % boundary) data.append('Content-Disposition: form-data; name="app_id"\r\n') data.appen

Vue 设置axios请求格式为form-data的操作步骤

Cover 在Vue中使用axios 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目下执行npm install axios. 之后在main.js中,添加: import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法,传入请求

NodeJs form-data格式传输文件的方法

本文介绍了Node Js 使用KOA处理form-data格式传输过来的文件,分享给大家.具体如下: 使用koa有一段时间了,评价是小巧精悍,只封装了基本的如request对象和response对象到上下文中,其他功能基本上靠第三方中间件来实现.导致的问题是使用起来就不太方便了,比如用koa上传文件,网上资料有限,对于小白而言,文件上传操作就困难多了. form表单上传文件流程(PHP和node js) 文件上传操作原理 form表单[注意:enctype="multipart/form-dat

原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】

本文实例讲述了原生PHP实现导出csv格式Excel文件的方法.分享给大家供大家参考,具体如下: 效果图 源码分析 index.php <?php require_once "./Export.php"; //测试数据 $headerList= ['列名1','列名2','列名3']; $data = [ ['值1','值2','值3'], ['值11','值22','值33'], ['值111','值222','值333'] ]; $fileName = "测试导出文

Java使用Socket通信传输文件的方法示例

本文实例讲述了Java使用Socket通信传输文件的方法.分享给大家供大家参考,具体如下: 前面几篇文章介绍了使用Java的Socket编程和NIO包在Socket中的应用,这篇文章说说怎样利用Socket编程来实现简单的文件传输. 这里由于前面一片文章介绍了NIO在Socket中的应用,所以这里在读写文件的时候也继续使用NIO包,所以代码看起来会比直接使用流的方式稍微复杂一点点. 下面的示例演示了客户端向服务器端发送一个文件,服务器作为响应给客户端回发一个文件.这里准备两个文件E:/test/

asp.net使用Socket.Send发送信息及Socket.SendFile传输文件的方法

本文实例讲述了asp.net使用Socket.Send发送信息及Socket.SendFile传输文件的方法.分享给大家供大家参考,具体如下: // Displays sending with a connected socket // using the overload that takes a buffer. public static int SendReceiveTest1(Socket server) { byte[] msg = Encoding.UTF8.GetBytes("Th

利用python库在局域网内传输文件的方法

1.电脑已经搭建python环境 2.深入到需要传输的文件目录下,此处以分享 nemo-huiyuanfei 文件为例 3.在路径栏输入 cmd 按回车进入终端 4.输入命令 python -m SimpleHTTPServer 8090 按回车 (端口号可以任意,不用必须为8090) 5.在局域网中任意浏览器输入框输入 文件所在主机 IP + Port 即可访问此文件目录并下载 () 6.点击需要下载的文件即可下载 7. [注意]python3.X 的命令输入为 python -m http.

Python使用cx_Freeze库生成msi格式安装文件的方法

本文实例讲述了Python使用cx_Freeze库生成msi格式安装文件的方法.分享给大家供大家参考,具体如下: ①.需要在目录下面创建一个文件 .setup.py ②.写入代码: import sys from cx_Freeze import setup, Executable import os os.environ['TCL_LIBRARY'] = r'C:\Python36-32\tcl\tcl8.6' os.environ['TK_LIBRARY'] = r'C:\Python36-

使用ffmpeg 合并aac格式音频文件的方法

FFmpeg简介 FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多code都是从头开发的. FFmpeg在Linux平台下开发,但它同样也可以在其它操作系统环境中编译运行,包括Windows.Mac OS X等.这个项目最早由Fabrice Bellard发起,2004

spring cloud feign实现远程调用服务传输文件的方法

实践案例包括两个项目,服务提供者项目名:upload-service,调用服务项目名:upload-client,主要给出两个服务之间的调用过程,文件上传功能不提供 项目框架:spring-boot 2.0.1.RELEASE.spring-cloud Finchley.RELEASE 依赖: <dependency> <groupId>io.github.openfeign.form</groupId> <artifactId>feign-form<

Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法

本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式)

form+iframe解决跨域上传文件的方法

(1)  jsp代码: <form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="bo