Làm cách nào để tải lên tệp\hình ảnh qua json api?

Tôi đang cố tải tệp hoặc hình ảnh lên trang web D9 qua json api. Thử nghiệm cụ thể là tải ảnh người dùng lên thực thể người dùng.

tôi đã theo dõi tài liệu hoặc đọc câu hỏi về, nhưng tôi không thể làm cho nó hoạt động.

Giao diện người dùng được thực hiện với Next.js.

Một bài kiểm tra được thực hiện như sau:

Giao diện người dùng tiếp theo gọi máy chủ api next.js:

const filename = selectFile.name;
const fr = FileReader mới();
fr.readAsArrayBuffer(tệp đã chọn);
fr.onload = hàm async () {
    const arrayBuffer = fr.result;
    if (arrayBuffer && typeof arrayBuffer !== 'chuỗi') {
        const base64String = _arrayBufferToBase64(arrayBuffer);
        const cookieSession = đang chờ getUpdateCookie();
        const res = đang chờ tìm nạp(`/api/users-test/user?cookie=${cookieSession}&name=${filename}`, {
            phương thức: 'POST', nội dung: base64String,
        });
    }
}

hàm _arrayBufferToBase64(bộ đệm: ArrayBuffer) {
    để nhị phân = '';
    const byte = new Uint8Array(bộ đệm);
    const len ​​= bytes.byteLength;
    for (cho i = 0; i < len; i++) {
        nhị phân += String.fromCharCode(byte[i]);
    }
    trả về window.btoa(nhị phân);
}

Máy chủ api next.js đăng lên Drupal:

const res = đang chờ tìm nạp (
      `${ process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/jsonapi/user/user/{userID}/user_picture`,
      {
        phương thức: 'POST',
        tiêu đề: {
          'Loại nội dung': 'ứng dụng/octet-stream',
          Chấp nhận: 'application/vnd.api+json',
          'Bố trí Nội dung': `name="file"; tên tệp = "$ {tên tệp}"`,
          Ủy quyền: `Bearer ${token}`,
        },
        cơ thể: req.body,
      }
    );

Tôi đã thử nhiều cách khác nhau để chuyển đổi tệp thành "dữ liệu tệp nhị phân", nhưng không có cách nào hiệu quả: ảnh người dùng luôn là một hình vuông trống có chữ X.

Tuy nhiên, nếu tôi thử cuộc gọi tương tự với người đưa thư, tệp sẽ được tải chính xác:

Vì vậy, hiện tại, tôi đưa ra giả thuyết rằng sự cố nằm ở mã javascript, trong khi Drupal đã được định cấu hình chính xác.

Tôi hiện đang có cùng một vấn đề. Bài đăng đi qua hoàn hảo trong người đưa thư. đoạn mã dưới đây được sử dụng để thực hiện hành động đăng bài trong nextjs

//hàm này dùng để convert file

const readFileDataAsBase64 = (fl) => {
    tập tin const = fl;

    trả lại Lời hứa mới ((giải quyết, từ chối) => {
        đầu đọc const = FileReader mới();

        reader.onload = (sự kiện) => {
          console.log('ở đây')
            giải quyết (sự kiện. target.result);
        };

        reader.onerror = (err) => {
            từ chối (err);
        };

        reader.readAsDataURL(tệp);
    });
}

// lấy giá trị của tệp được chuyển đổi thành nhị phân
const filedata= đang chờ readFileDataAsBase64(values.files[0]);

//gọi hàm post file để thực hiện post
const resfile = đang chờ postFiles(
      'http://the-url',
      dữ liệu tập tin,
      value.files[0].name
    );

const postFiles = (url, nội dung, tên tệp) => {

    const myPost = async() => {
        cố gắng {
         const res = đang chờ tìm nạp (url, {
              phương thức: 'POST',
              cơ thể: cơ thể,
              tiêu đề: {
                'Loại nội dung': 'ứng dụng/octet-stream',
                'Bố trí nội dung': `file; tên tệp=${tên tệp}`,
                'api-key': 'myapi-key',
              },
            });
        } bắt (lỗi){
        }
  
    } 
    postData();
  
  };

Tệp này không được đăng lên drupal.Có ai tìm thấy giải pháp để đăng tệp đúng cách bằng api không