首页 > 其他分享 >文件上传的multipart/form-data属性,你理解了吗

文件上传的multipart/form-data属性,你理解了吗

时间:2022-12-04 22:22:05浏览次数:48  
标签:请求 form data 拼接 multipart POST 上传

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

action

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

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

<form action="http://127.0.0.1:8000">
       账号: <input name="username">
       密码:<input name="password">
       <button type="submit">提交</button>
</form>

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

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

method

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

  • GET 参数直接拼接在 url 后面,默认的形式
  • POST 参数放在请求体中
<form action="http://127.0.0.1:8000" method="post">
       账号: <input name="username">
       密码:<input name="password">
       <button type="submit">提交</button>
 </form>

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

enctype

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

  • application/x-www-form-urlencoded 不写时默认属性,用&分隔参数,用=分隔键和值,字符用URL编码方式进行编码,GET请求和POST请求都可用
  • multipart/form-data 多用于文件上传,用于POST请求
 <form action="http://127.0.0.1:8000" method="post" enctype="multipart/form-data">
       昵称:<input name="nickname">
       头像:<input type="file" name="photo">
       <button type="submit">提交</button>
</form>

填写信息并选择文件

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

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

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

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

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

标签:请求,form,data,拼接,multipart,POST,上传
From: https://www.cnblogs.com/vigourice/p/16950998.html

相关文章

  • SpringBoot中使用Spring Data JPA
    Springboot中如何集成springdatajpa一什么是ORM?ORM即Object-RelationlMapping,它的作用是在关系型数据库和对象之间作一个映射,这样,我们在具体的操作数据库的时候,就不需......
  • DataCollatorWithPadding
    @dataclassclassDataCollatorWithPadding:"""Datacollatorthatwilldynamicallypadtheinputstothelongestsequenceinthebatch.Args:......
  • SpringBoot中使用Spring Data JPA
    Springboot中如何集成springdatajpa一什么是ORM?ORM即Object-RelationlMapping,它的作用是在关系型数据库和对象之间作一个映射,这样,我们在具体的操作数据库的时......
  • Springboot之additional-spring-configuration-metadata.json自定义提示
    【3】@ConfigurationProperties注入属性https://blog.csdn.net/qq_25614773/article/details/124788923 https://docs.spring.io/spring-boot/docs/2.4.7/reference/ht......
  • 说说JeeSite的DataGrid
    已经很久不做JavaScript编程了,很多内容已经淡忘了。最近使用JeeSite的框架做个应用,使用其中的DataGrid。实际上这个DataGrid是对开源的jqGrid进行了包装。由于JeeSite网站......
  • WinForm混合Blazor(中)
    在上一篇中介绍了一下razor文件中,js与c#之间的相互调用,但WinForm和Blazor混合中,没有真正与WinForm进行交互,本篇来说明一下。WinForm中混合Blazor是通过ServiceCol......
  • WinForm混合Blazor(下)
    有时,为了省事,我们也可以把窗体的控件注入到ServiceCollection中,在razor中订阅事件,这样就省了中间的桥梁,直接用控件当桥梁,下面以一个Button和Timer为例,来展示使用方式。......
  • WinForm混合Blazor(下)
    有时,为了省事,我们也可以把窗体的控件注入到ServiceCollection中,在razor中订阅事件,这样就省了中间的桥梁,直接用控件当桥梁,下面以一个Button和Timer为例,来展示使用方式。......
  • WinForm混合Blazor(中)
    在上一篇中介绍了一下razor文件中,js与c#之间的相互调用,但WinForm和Blazor混合中,没有真正与WinForm进行交互,本篇来说明一下。WinForm中混合Blazor是通过ServiceColle......
  • WinForm混合Blazor(下)
    有时,为了省事,我们也可以把窗体的控件注入到ServiceCollection中,在razor中订阅事件,这样就省了中间的桥梁,直接用控件当桥梁,下面以一个Button和Timer为例,来展示使用方式。......