How upload a file\image via json api?

I'm trying to upload a file or image on a D9 site via json api. The test is namely to upload the user picture on the user entity.

I've been following the documentation or read questions about, but I can't get it working.

The front-end is done with Next.js.

One the test done is the following:

The front-end next calls the next.js api server:

const filename = selectedFile.name;
const fr = new FileReader();
fr.readAsArrayBuffer(selectedFile);
fr.onload = async function () {
    const arrayBuffer = fr.result;
    if (arrayBuffer && typeof arrayBuffer !== 'string') {
        const base64String = _arrayBufferToBase64(arrayBuffer);
        const cookieSession = await getUpdateCookie();
        const res = await fetch(`/api/users-test/user?cookie=${cookieSession}&name=${filename}`, {
            method: 'POST', body: base64String,
        });
    }
}

function _arrayBufferToBase64(buffer: ArrayBuffer) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

The api next.js server post then to Drupal:

const res = await fetch(
      `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/jsonapi/user/user/{userID}/user_picture`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/octet-stream',
          Accept: 'application/vnd.api+json',
          'Content-Disposition': `name="file"; filename="${filename}"`,
          Authorization: `Bearer ${token}`,
        },
        body: req.body,
      }
    );

I tried different ways to convert the file to "binary file data", but none work: the user picture is always a blank square with an X.

However, if I try the same call with postman, the file is correctly loaded:

So, for now, I hypothesize the problem is on the javascript code, while Drupal has been configured correctly.

В настоящее время у меня такая же проблема. Почта проходит отлично в почтальоне. приведенный ниже фрагмент кода используется для выполнения действия публикации в nextjs.

//эта функция используется для преобразования файла

const readFileDataAsBase64 = (fl) => {
    константный файл = fl;

    вернуть новое обещание ((разрешить, отклонить) => {
        const reader = новый FileReader();

        reader.onload = (событие) => {
          console.log('здесь')
            решить (событие.цель.результат);
        };

        reader.onerror = (ошибка) => {
            отклонить (ошибка);
        };

        читатель.readAsDataURL (файл);
    });
}

//получаем значение файла, преобразованное в бинарный
const filedata = await readFileDataAsBase64 (values.files [0]);

//вызовите функцию почтового файла, чтобы выполнить публикацию
const resfile = ожидание почтовых файлов (
      'http://адрес',
      файл,
      значения.файлы[0].имя
    );

const postFiles = (url, тело, имя файла) => {

    const myPost = асинхронный () => {
        пытаться {
         const res = ожидание выборки (url, {
              метод: «ПОСТ»,
              тело: тело,
              заголовки: {
                'Content-Type': 'application/octet-stream',
                «Контент-диспозиция»: «файл; имя_файла=${имя_файла}`,
                'апи-ключ': 'мяпи-ключ',
              },
            });
        } поймать (ошибиться){
        }
  
    } 
    постданные();
  
  };

Этот файл не публикуется в drupal.Кто-нибудь нашел решение для правильной публикации файла с помощью API