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.