构造Form表单（设计接口）时，Enctype属性到底该如何选择？

问题由来

定义上传文件接口时，都会选择使用 multipart/form-data 方式，即要求表单的enctype属性为multipart/form-data，文件以file类型提交，参数以key-value方式提交。最近在写个小工具，功能是把本地的swagger格式的接口文档一键上传到接口管理平台yapi和metersphere上，在看两个平台的导入接口文档openapi后发现都不是很规范。

先看下ypai导入接口文档接口的设计，yapi要求使用application/x-www-form-urlencoded 方式导入文件（将文件内容作为一个key的value，本质上不是上传文件，文件比较大的时候这种方式性能很低）

再看下metersphere导入接口文档接口的设计，因为官方文档写的不够详细，文档中没有体现传参方式，所以通过抓包看。抓包后参数部分如下：

------WebKitFormBoundary2iHGla7AYYuM2hRW
Content-Disposition: form-data; name="file"; filename="swagger.json"
Content-Type: application/json
------WebKitFormBoundary2iHGla7AYYuM2hRW
Content-Disposition: form-data; name="request"; filename="blob"
Content-Type: application/json

{"file":{"uid":1678539466009},"modeId":"incrementalMerge","moduleId":"64a43afa-a846-431b-9b5a-72c0d40081ab","coverModule":false,"modulePath":"/未规划接口","platform":"Swagger2","saved":true,"model":"definition","projectId":"6783a271-f88f-569d-b6a5-43ef180bd17a","protocol":"HTTP"}
------WebKitFormBoundary2iHGla7AYYuM2hRW--

可以看出是使用了multipart/form-data方式，需要导入的文件也是以file类型提交的，但是参数部分竟然也要求使用file类型提交。

enctype属性

enctype规定了form表单发送到服务器的编码方式，有如下的三个值：

• application/x-www-form-urlencoded：在发送前编码所有字符，把表单数据转换成一个字串（key1=value1&key2=value2…），当请求方式为get时拼接到url后面并使用用?分割（例如http://test.com/xxx/detail?key1=value1&key2=value2）；当请求方式为post时放到到body中。
• multipart/form-data：不对字符编码，如果表单中既有文本数据，又有文件等二进制数据，必须使用此值。浏览器（自己构造表单也需要这么做）会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition、分割符(boundary)，另外文件类型的会加上Content-Type(默认为application/octet-stream)。
• text/plain：将空格转换为"+"号，但不对特殊字符编码，不建议使用。

小结

如果接口没有上传文件的需求，使用application/x-www-form-urlencoded 即可。

如果接口有上传文件的需求，使用 multipart/form-data，文件以file类型提交，参数以key-value方式提交。