typescript - OpenAPI-Generator 實作的多部分請求無法支援多檔案上傳
我們使用 OpenAPI 3.0.0 架構來構建我們的 API,並生成用於應用程式前端部分的 TypeScript 代碼。我們已定義了一個端點,該端點應能夠消耗多個文件並將其上傳到後端。端點的請求主體如下所示:
requestBody:
content:
multipart/form-data:
schema:
properties:
images:
type: array
items:
type: string
format: binary
required:
- images
在 OpenAPI 關於檔案上傳的網頁以及 Stackoverflow 上的多篇貼文中,都可以找到類似的定義。
當 API 被生成時,images 預期的類型是 Array<Blob>。當前端的文件輸入元素的輸入發生變化時,會調用該端點。更具體地說,該端點的調用方式如下函數所示:
const onInputChange = useCallback(() => {
const files = inputRef.current.files; // React.useRef that's passed in as ref for the html input-element
uploadImages(Array.from(files)); // uploadImages is the function that calls the endpoint
}, [inputRef, api]);
在這種情況下,API 驗證總是返回帶有狀態碼 400 - 錯誤請求的 HTTP 回應。查看 OpenAPI 生成器生成的實現,images 屬性是這樣附加到表單中的:
if (requestParameters.images) {
formParams.append('images', requestParameters.images.join(runtime.COLLECTION_FORMATS["csv"]));
}
當我們現在查看這段程式碼產生的 HTTP 請求時,我們可以在 表單資料 中看到類似這樣的內容:
------WebKitFormBoundaryItlGaGOpZu9sgAgS
Content-Disposition: form-data; name="images"
[object File],[object File]
------WebKitFormBoundaryItlGaGOpZu9sgAgS--
在選擇檔案對話框中選擇的每個影像,都會附加一個 [object File] 實例。
該端點之前可以用於單張圖片上傳。在這種情況下,用於將圖片附加到請求的生成代碼是:
if (requestParameters.file !== undefined) {
formParams.append('file', requestParameters.file as any);
}
而請求中的 表單資料 看起來像這樣:
------WebKitFormBoundaryIDujfCP9peNvyEE0
Content-Disposition: form-data; name="file"; filename="IMAGENAME.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryIDujfCP9peNvyEE0--
在多檔案情況下,我們是不是錯誤地呼叫了端點?這個功能在用 TypeScript 的 OpenAPI-generator 時是否運作不正常?
如果需要,我會很樂意提供更多資訊。