typescript - การใช้งาน OpenAPI-Generator ของ Multipart-Request ไม่ทำงานสำหรับการอัปโหลดหลายไฟล์
เราสร้าง API ของเราด้วย schema ของ OpenAPI 3.0.0 และสร้างโค้ด TypeScript ที่ใช้สำหรับส่วนหน้า (frontend) ของแอปพลิเคชันของเรา เราได้กำหนด endpoint หนึ่งซึ่งควรสามารถรับไฟล์หลายไฟล์และอัปโหลดไปยัง backend ได้ นี่คือลักษณะของ request body ของ endpoint:
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 จะส่งกลับ HTTP-Response พร้อมรหัสสถานะ 400 - Bad Request อยู่เสมอ เมื่อดูการใช้งานจริงที่ generator ของ OpenAPI สร้างขึ้น คุณสมบัติ images จะถูกเพิ่มเข้าไปในฟอร์มแบบนี้:
if (requestParameters.images) {
formParams.append('images', requestParameters.images.join(runtime.COLLECTION_FORMATS["csv"]));
}
เมื่อเรามาดูที่การร้องขอ HTTP ซึ่งโค้ดนี้สร้างขึ้น เราจะเห็นบางสิ่งบางอย่างเช่นนี้ใน Form Data:
------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);
}
และ Form Data ในคำขอดูเหมือนเช่นนี้:
------WebKitFormBoundaryIDujfCP9peNvyEE0
Content-Disposition: form-data; name="file"; filename="IMAGENAME.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryIDujfCP9peNvyEE0--
เรากำลังเรียกจุดสิ้นสุดผิดในกรณีหลายไฟล์หรือไม่? ฟังก์ชันนี้ใช้งานไม่ถูกต้องกับ OpenAPI-generator สำหรับ TypeScript หรือเปล่า?
ฉันยินดีที่จะให้ข้อมูลเพิ่มเติมหากจำเป็น