อัปโหลดไฟล์ \ รูปภาพผ่าน json api อย่างไร

ฉันกำลังพยายามอัปโหลดไฟล์หรือรูปภาพบนไซต์ D9 ผ่าน json api การทดสอบคือการอัปโหลดรูปภาพผู้ใช้ในเอนทิตีผู้ใช้

ฉันได้ติดตาม เอกสาร หรืออ่าน คำถามเกี่ยวกับแต่ฉันไม่สามารถทำให้มันทำงานได้

ส่วนหน้าทำด้วย Next.js

การทดสอบที่ทำมีดังต่อไปนี้:

ส่วนหน้าถัดไปเรียกเซิร์ฟเวอร์ next.js api:

ชื่อไฟล์ const = SelectedFile.name;
const fr = ใหม่ FileReader();
fr.readAsArrayBuffer(ไฟล์ที่เลือก);
fr.onload = ฟังก์ชัน async () {
    const arrayBuffer = fr.result;
    ถ้า (arrayBuffer && ประเภทของ arrayBuffer !== 'สตริง') {
        const base64String = _arrayBufferToBase64(arrayBuffer);
        const cookieSession = รอ getUpdateCookie ();
        const res = รอการดึงข้อมูล (`/api/users-test/user?cookie=${cookieSession}&name=${filename}`, {
            วิธีการ: 'POST', เนื้อหา: base64String,
        });
    }
}

ฟังก์ชัน _arrayBufferToBase64 (บัฟเฟอร์: ArrayBuffer) {
    ให้ไบนารี = '';
    ไบต์ const = ใหม่ Uint8Array (บัฟเฟอร์);
    const len ​​= bytes.byteLength;
    สำหรับ (ให้ i = 0; i < len; i++) {
        ไบนารี += String.fromCharCode (ไบต์ [i]);
    }
    กลับ window.btoa (ไบนารี);
}

เซิร์ฟเวอร์ api next.js โพสต์ไปที่ Drupal:

const res = รอการดึงข้อมูล (
      `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/jsonapi/user/user/{userID}/user_picture`,
      {
        วิธีการ: 'โพสต์',
        ส่วนหัว: {
          'ประเภทเนื้อหา': 'แอปพลิเคชัน/ออคเต็ตสตรีม'
          ยอมรับ: 'application/vnd.api+json'
          'การจัดการเนื้อหา': `name="file"; ชื่อไฟล์ = "${ชื่อไฟล์}"`,
          การอนุญาต: `ผู้ถือ ${token}`,
        },
        ร่างกาย: req.body,
      }
    );

ฉันลองหลายวิธีในการแปลงไฟล์เป็น "ข้อมูลไฟล์ไบนารี" แต่ไม่ได้ผล: รูปภาพของผู้ใช้จะเป็นช่องสี่เหลี่ยมว่างที่มี X เสมอ

อย่างไรก็ตาม หากฉันลองโทรแบบเดียวกันกับบุรุษไปรษณีย์ ไฟล์จะโหลดอย่างถูกต้อง:

สำหรับตอนนี้ ฉันตั้งสมมติฐานว่าปัญหาอยู่ที่โค้ดจาวาสคริปต์ ในขณะที่ Drupal ได้รับการกำหนดค่าอย่างถูกต้อง

ขณะนี้ฉันมีปัญหาเดียวกัน โพสต์ผ่านไปอย่างสมบูรณ์แบบในบุรุษไปรษณีย์ ข้อมูลโค้ดด้านล่างใช้เพื่อดำเนินการโพสต์ใน nextjs

// ฟังก์ชั่นนี้ใช้ในการแปลงไฟล์

const readFileDataAsBase64 = (ชั้น) => {
    ไฟล์ const = ชั้น;

    คืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => {
        เครื่องอ่าน const = FileReader ใหม่ ();

        reader.onload = (เหตุการณ์) => {
          console.log ('ที่นี่')
            แก้ไข (event.target.result);
        };

        reader.onerror = (ผิดพลาด) => {
            ปฏิเสธ (ผิดพลาด);
        };

        reader.readAsDataURL (ไฟล์);
    });
}

// รับค่าของไฟล์ที่แปลงเป็นไบนารี
const filedata = รอ readFileDataAsBase64 (values.files [0]);

// เรียกใช้ฟังก์ชันไฟล์โพสต์เพื่อดำเนินการโพสต์
const resfile = รอ postFiles (
      'http://the-url',
      ข้อมูลไฟล์,
      ค่า.ไฟล์[0].ชื่อ
    );

const postFiles = (url, body, ชื่อไฟล์) => {

    const myPost = async() => {
        พยายาม {
         const res = รอการดึงข้อมูล (url, {
              วิธีการ: 'โพสต์',
              ร่างกาย: ร่างกาย,
              ส่วนหัว: {
                'ประเภทเนื้อหา': 'แอปพลิเคชัน/ออคเต็ตสตรีม'
                'การจัดการเนื้อหา': `file; ชื่อไฟล์=${ชื่อไฟล์}`,
                'api-key': 'myapi-คีย์'
              },
            });
        } จับ (ผิดพลาด){
        }
  
    } 
    โพสต์ข้อมูล ();
  
  };

ไฟล์นี้ไม่ถูกโพสต์ไปที่ drupalมีใครพบวิธีแก้ปัญหาในการโพสต์ไฟล์โดยใช้ API อย่างถูกต้องหรือไม่