網站搜尋

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 時是否運作不正常?

如果需要,我會很樂意提供更多資訊。