html form multipart,HTML表单multipart-data方式遇到的坑

简介

前端为了方便调用接口的时候统一使用的是multipart/form-data编码的方式提交的，但是始终调用不成功，我自己按正常方式，使用mock测试，浏览器访问，postman模拟都没有问题。

我看了一下日志，发现了下面的错误信息：

Caused by: org.apache.tomcat.util.http.fileupload.FileUploadException: Stream ended unexpectedly

显然是在tomcat解析的时候就出错了。所以我怀疑可能是multipart/form-data编码有问题。所以要解决问题还是得先了解一下multipart/form-data的编码方式，下面我们就先来了解一下multipart/form-data的编码方式。

multipart-data编码格式

首先Header中要设置

ContentType:multipart/form-data; boundary=----WebKitFormBoundaryk34S6TRJPw3FDBGH

boundary的值随便设置，不同的浏览器也有不同的实现，这不重要。

重要的是参数的格式:

------WebKitFormBoundaryk34S6TRJPw3FDBGH

Content-Disposition: form-data; name="id"

------WebKitFormBoundaryk34S6TRJPw3FDBGH

Content-Disposition: form-data; name="name"

------WebKitFormBoundaryk34S6TRJPw3FDBGH

Content-Disposition: form-data; name="type"

3000

------WebKitFormBoundaryk34S6TRJPw3FDBGH--

每一个参数都是： --加上boundary做为开头

------WebKitFormBoundaryk34S6TRJPw3FDBGH

紧接着的内容是用来设置参数name的，就是参数名称的。

Content-Disposition: form-data; name="id"

接下来的内容之后是一个空行，空行之后是参数的值。

最后： --加上boundary加上--做为最后的结尾

------WebKitFormBoundaryk34S6TRJPw3FDBGH--

注意：上面的内容的换行符都是\r\n

问题原因

知道了multipart/form-data的编码方式，最后发现错误是参数结尾少了换行符。

这个错误还真不好发现。

简便方式

有时候为了验证multipart/form-data编码的参数有没有问题，可以借助浏览器来实现，编写一个html文件。form表单设置需要的参数，把enctype设置为multipart/form-data,打开开发者博士，提交表单，在请求参数中就可以看到了。

componets

{"code":200,"data":[{"id":1,"name":"alice","type":2},{"id":2,"name":"allen","type":1}],"message":"success"}

html form multipart,HTML表单multipart-data方式遇到的坑相关推荐

表单 multipart/form-data 如何提交中文乱码
表单 multipart/form-data 如何提交中文乱码解决方案: multipart/form-data 是用来上传文件时的一个类型如果用这个的话,有一个专门的乱码解决的啊**.getSt ...
vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
Jquery.form自动提交表单上传图片
先引入相关js文件 1 2 <script type="text/javascript" src="jquery-1.7.2.min.js">< ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
elementUI弹框form多元素表单问题 - 抛砖篇
疑问1:elementUI的这个MessageBox弹框能否添加多个表单元素? 疑问2:如果能添加多个,怎么添加? 疑问3:使用el-dialog组件如何调用? 通过上述实践,总结发现还是使用el-d ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
form表单使用put方式提交
form表单的提交方式只支持GET或者POST,为了实现restful风格,需要使用form表单实现PUT和DELETE方式的提交,对于这种情况,spring提供了过滤器 HiddenHttpMeth ...
form表单的提交方式(get和post的区别)
form表单的提交方式请求方式有:POST.GET.OPTIONS.DELETE.TRACE.PUT.CONNECT 主要请求方式 form表单提交方式有很多,常用的有post和get post和g ...
html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...

html form multipart,HTML表单multipart-data方式遇到的坑

html form multipart,HTML表单multipart-data方式遇到的坑相关推荐

最新文章

热门文章