typescript - OpenAPI-Generator-implementation av multipart-förfrågan fungerar inte för uppladdning av flera filer


Vi bygger vårt API med hjälp av ett OpenAPI 3.0.0-schema och genererar TypeScript-kod som används för frontend-delen av vår applikation. Vi har definierat en endpoint som ska kunna ta emot flera filer och ladda upp dem till backend. Så här ser requestbody för endpointen ut:

requestBody:
  content:
    multipart/form-data:
      schema:
        properties:
          images:
            type: array
            items:
              type: string
              format: binary
        required:
          - images

En liknande definition hittades på OpenAPI-webbsidan om filuppladdningar och på flera inlägg här på Stackoverflow.

När API:et genereras förväntas images vara av typen Array<Blob>. Endpunkten anropas när inmatningen av ett filinmatningselement ändras på frontend-sidan. Mer specifikt anropas endpunkten med denna funktion:

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]);

I det här fallet returnerar API-valideringen alltid ett HTTP-svar med statuskod 400 - Bad Request. Om man tittar på implementationen som OpenAPI-generatorn skapade, läggs images-egenskapen till i formuläret på följande sätt:

if (requestParameters.images) {
    formParams.append('images', requestParameters.images.join(runtime.COLLECTION_FORMATS["csv"]));
}

när vi nu tittar på HTTP-förfrågan som denna kod producerar, kan vi se något liknande detta i Form Data:

------WebKitFormBoundaryItlGaGOpZu9sgAgS
Content-Disposition: form-data; name="images"

[object File],[object File]
------WebKitFormBoundaryItlGaGOpZu9sgAgS--

där en instans av [object File] läggs till för varje bild som valdes i välj-fil-dialogrutan.

Slutpunkten fungerade tidigare för uppladdning av en bild. I det här fallet var den genererade koden för att lägga till bilden i förfrågan:

if (requestParameters.file !== undefined) {
    formParams.append('file', requestParameters.file as any);
}

och Form Data i förfrågan såg ut så här:

------WebKitFormBoundaryIDujfCP9peNvyEE0
Content-Disposition: form-data; name="file"; filename="IMAGENAME.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryIDujfCP9peNvyEE0--

Kallar vi fel slutpunkt i fallet med flera filer? Fungerar inte denna funktionalitet korrekt med OpenAPI-generatorn för TypeScript?

Jag kommer gärna att ge ytterligare information om det behövs.

Relaterade artiklar