multipart/form-data深入解析
来源：网络
编辑：忘情
时间：2023-01-11
multipart/form-data最初由 《RFC 1867: Form-based File Upload in HTML》文档提出。
1867文档简介中说明文件上传作为一种常见的需求，在目前(1995年)的html中的form表单格式中还不支持，因此提出了一种兼容此需求的mime type。
1867文档中也写了为什么要新增一个类型，而不使用旧有的application/x-www-form-urlencoded：因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。
实例分析
下面举几个栗子: 先使用get方法和post方法，但不写enctype，即以默认的application/x-www-form-urlencoded表格数据格式进行表单请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
使用get请求,使用application/x-www-form-urlencoded请求头
<form method="get" action="xxx">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
使用post请求,使用application/x-www-form-urlencoded请求头
<form method="post" action="xxx">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
</body>
</html>
可知post方法和get方法都只是把文件名编码进了url中，文件内容无法得到，这也证实了上述文档中的内容，使用application/x-www-form-urlencoded无法实现文件上传。
若使用enctype='multipart/form-data'，并分别使用post和get方法提交表单则会得到如下结果:
// 使用get请求,使用multipart/form-data请求头
<form method="get" action="xxx" enctype="multipart/form-data">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
// 使用post请求,使用application/x-www-form-urlencoded请求头
<form method="post" action="xxx" enctype="multipart/form-data">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
可知在上传文件中使用get方法是无效的，依然只能得到文件名。而post结合multipart/form-data才能真正将文件内容传入请求体。
看到提交文件的格式使用一长串字符作为boundtry封装线对字段进行分割。这也很符合multipart多个部分的语义，包含了多个部分集，每一部分都包含了一个content-desposition头，其值为form-data,以及一个name属性，其值为表单的字段名，文件输入框还可以使用filename参数指定文件名。content-type非必须属性，其值会根据文件类型进行变化，默认值是text/plain。multipart的每一个part上方是边缘，最后一个part的下方添加一个边缘。
这篇文章主要是讲解multipart/form-data深入解析，希望能帮到你。
1867文档简介中说明文件上传作为一种常见的需求，在目前(1995年)的html中的form表单格式中还不支持，因此提出了一种兼容此需求的mime type。
1867文档中也写了为什么要新增一个类型，而不使用旧有的application/x-www-form-urlencoded：因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端，二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了，专门用于有效的传输文件。
实例分析
下面举几个栗子: 先使用get方法和post方法，但不写enctype，即以默认的application/x-www-form-urlencoded表格数据格式进行表单请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
使用get请求,使用application/x-www-form-urlencoded请求头
<form method="get" action="xxx">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
使用post请求,使用application/x-www-form-urlencoded请求头
<form method="post" action="xxx">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
</body>
</html>
可知post方法和get方法都只是把文件名编码进了url中，文件内容无法得到，这也证实了上述文档中的内容，使用application/x-www-form-urlencoded无法实现文件上传。
若使用enctype='multipart/form-data'，并分别使用post和get方法提交表单则会得到如下结果:
// 使用get请求,使用multipart/form-data请求头
<form method="get" action="xxx" enctype="multipart/form-data">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
// 使用post请求,使用application/x-www-form-urlencoded请求头
<form method="post" action="xxx" enctype="multipart/form-data">
<label for="name">name</label>
<input type="text" id="name" name="name">
<label for="file">file</label>
<input type="file" id="file" name="file" />
<input type="submit" value="submit" name="submit">
</form>
可知在上传文件中使用get方法是无效的，依然只能得到文件名。而post结合multipart/form-data才能真正将文件内容传入请求体。
看到提交文件的格式使用一长串字符作为boundtry封装线对字段进行分割。这也很符合multipart多个部分的语义，包含了多个部分集，每一部分都包含了一个content-desposition头，其值为form-data,以及一个name属性，其值为表单的字段名，文件输入框还可以使用filename参数指定文件名。content-type非必须属性，其值会根据文件类型进行变化，默认值是text/plain。multipart的每一个part上方是边缘，最后一个part的下方添加一个边缘。
这篇文章主要是讲解multipart/form-data深入解析，希望能帮到你。
相关文章：
相关推荐：
- [前端]Vue3 编写自定义指令插件的示例代码_vue.js
- [前端]vue使用element实现上传图片和修改图片功能_vue.js
- [前端]JS前端架构pnpm构建Monorepo方式管理demo_JavaScript
- [前端]Iconfont不能上传如何维护Icon_React
- [前端]jquery实现手风琴展开效果_jquery
- [前端]js前端实现word excel pdf ppt mp4图片文本等文件预览_JavaScript
- [前端]uniapp实现横屏签字版_javascript技巧
- [前端]微信小程序实现手写签名(签字版)_javascript技巧
- [前端]vue 大文件分片上传(断点续传、并发上传、秒传)_vue.js
- [前端]微信小程序实现日期范围选择_javascript技巧
栏目分类
最新文章
- 如何在 JavaScript 中把字符串转换成数字
- 怎么理解ES6中Proxy及使用场景
- 详解vuex中的this.$store.dispatch方法
- javascript的call和apply的区别
- 为什么要使用Reflect对象
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 前端一些好学好用的代码规范-git hook+husky + commitlint
- 解决报错Node Sass does not yet support your current environment: Windows 64-bit with Unsupported
- mac安装nvm
- npm husky install .git can not be found解决方案
热门文章
- CSS世界PDF电子版百度云网盘下载
- JavaScript权威指南(第6版)中文版PDF电子版百度云网盘下载
- Web服务 原理与技术[Michael P. Papazoglou]PDF电子版百度云网盘下载[44.7M]
- 基于TypeScript的HTML5游戏开发本科毕业设计PDF电子版百度云网盘下载
- 详解vue修改elementUI的分页组件视图没更新问题
- javascript的call和apply的区别
- WebKit技术内幕朱永盛PDF电子版百度云网盘下载
- JAVASCRIPT语言精髓与编程实践.周爱民.扫描版PDF电子版百度云网盘下载
- 精彩绝伦的CSS[Eric A. Meyer]PDF电子版百度云网盘下载[25.8M]
- HTML5与CSS3基础教程(第8版)[Elizabeth Castro]PDF电子版百度云网盘下载[72M]