ค้นหาเว็บไซต์

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 หรือเปล่า?

ฉันยินดีที่จะให้ข้อมูลเพิ่มเติมหากจำเป็น

บทความที่เกี่ยวข้อง