問(wèn)題由來(lái)

定義上傳文件接口時(shí)，都會(huì)選擇使用 multipart/form-data 方式，即要求表單的enctype屬性為multipart/form-data，文件以file類型提交，參數(shù)以key-value方式提交。最近在寫個(gè)小工具，功能是把本地的swagger格式的接口文檔一鍵上傳到接口管理平臺(tái)yapi和metersphere上，在看兩個(gè)平臺(tái)的導(dǎo)入接口文檔openapi后發(fā)現(xiàn)都不是很規(guī)范。

先看下ypai導(dǎo)入接口文檔接口的設(shè)計(jì)，yapi要求使用application/x-www-form-urlencoded 方式導(dǎo)入文件（將文件內(nèi)容作為一個(gè)key的value，本質(zhì)上不是上傳文件，文件比較大的時(shí)候這種方式性能很低）

再看下metersphere導(dǎo)入接口文檔接口的設(shè)計(jì)，因?yàn)楣俜轿臋n寫的不夠詳細(xì)，文檔中沒(méi)有體現(xiàn)傳參方式，所以通過(guò)抓包看。抓包后參數(shù)部分如下：

------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":"/未規(guī)劃接口","platform":"Swagger2","saved":true,"model":"definition","projectId":"6783a271-f88f-569d-b6a5-43ef180bd17a","protocol":"HTTP"}
------WebKitFormBoundary2iHGla7AYYuM2hRW--

可以看出是使用了multipart/form-data方式，需要導(dǎo)入的文件也是以file類型提交的，但是參數(shù)部分竟然也要求使用file類型提交。

enctype屬性

enctype規(guī)定了form表單發(fā)送到服務(wù)器的編碼方式，有如下的三個(gè)值：

• application/x-www-form-urlencoded：在發(fā)送前編碼所有字符，把表單數(shù)據(jù)轉(zhuǎn)換成一個(gè)字串（key1=value1&key2=value2…），當(dāng)請(qǐng)求方式為get時(shí)拼接到url后面并使用用?分割（例如http://test.com/xxx/detail?key1=value1&key2=value2）；當(dāng)請(qǐng)求方式為post時(shí)放到到body中。
• multipart/form-data：不對(duì)字符編碼，如果表單中既有文本數(shù)據(jù)，又有文件等二進(jìn)制數(shù)據(jù)，必須使用此值。瀏覽器（自己構(gòu)造表單也需要這么做）會(huì)把整個(gè)表單以控件為單位分割，并為每個(gè)部分加上Content-Disposition、分割符(boundary)，另外文件類型的會(huì)加上Content-Type(默認(rèn)為application/octet-stream)。
• text/plain：將空格轉(zhuǎn)換為"+"號(hào)，但不對(duì)特殊字符編碼，不建議使用。

小結(jié)

如果接口沒(méi)有上傳文件的需求，使用application/x-www-form-urlencoded 即可。

如果接口有上傳文件的需求，使用 multipart/form-data，文件以file類型提交，參數(shù)以key-value方式提交。