189 8069 5689

文件上传的multipart/form-data属性，你理解了吗-创新互联

form表单经常用于前端发送请求，比如：用户填写信息、选择数据、上传文件，对于不同的场景，上传数据的格式也会有些区别。

网站设计、网站建设服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。成都创新互联公司把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！
action

action 表示该请求的 url 地址，定义在form上，请求的URI，可以写完整，也可以以斜线开头，会自动拼接域名端口号。

本地通过 nodejs 在8000端口起了一个服务，当 button 的 type 为 submit 时，点击后会默认发送请求。

   账号：   密码：

在浏览器中表单就是这样显示的，在账号密码的输入框中分别输入内容

在这里插入图片描述

点击提交按钮时，会将输入的内容自动拼接在 action 参数之后

在这里插入图片描述

method

method 属性规定了此次 HTTP 请求的方法。

  • GET 参数直接拼接在 url 后面，默认的形式
  • POST 参数放在请求体中
   账号：   密码：

当使用POST请求时，填写信息点击提交按钮，参数不再拼接到 url 后面，而是放到 body 中，仍然以 & 拼接。

在这里插入图片描述

enctype

enctype 决定着POST请求时，请求体的编码方式。

  • application/x-www-form-urlencoded 不写时默认属性，用&分隔参数，用=分隔键和值，字符用URL编码方式进行编码，GET请求和POST请求都可用
  • multipart/form-data 多用于文件上传，用于POST请求
   昵称：   头像：

填写信息并选择文件

在这里插入图片描述

当请求方法改为 get 时，url 上只拼接了上传文件的名称，没有将文件的具体内容发送到服务器端。

在这里插入图片描述

当请求方法为 post 时，multipart/form-data 才有着其作用，通过抓包工具追踪的HTTP流来看，请求报文的 Content-Type 中，boundary 后面有一串字符，这个字符就用于拼接用户输入、上传的数据

在这里插入图片描述

而上传的图片信息，将以二进制数据的形式传递

在这里插入图片描述

每一项数据通过两个短横线+ bounary= 后面的字符相隔，这里是----WebKitFormBoundaryBFUEET96fRvnOc3r，服务器获取数据时，通过这个标识来截取即可。

以上就是文件上传的multipart/form-data属性的内容 ， 更多有关前端、网络协议的内容可以参考我其它的博文，持续更新中~

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧


文章标题：文件上传的multipart/form-data属性，你理解了吗-创新互联
当前URL：http://jkwzsj.com/article/djcihd.html

其他资讯