問題由來

定義上傳文件接口時，都會選擇使用 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方式提交。