Lo que sucede es que el lector no ha terminado de leer antes de que continúe la llamada de Axios. El lector se ejecuta de forma asíncrona. Por lo tanto, el orden de las operaciones a menudo termina siendo algo como esto:

1. Inicie la operación de lectura.
2. Adjunte el controlador de eventos onloaded .
3. Inicie la solicitud de Axios, que probablemente se envíe inmediatamente en este punto.
4. Completa la operación de lectura.
5. Complete la solicitud de Axios.

Debido a que no está esperando que finalice el evento de carga antes de enviar la solicitud de Axios, la solicitud no incluye los nuevos datos. Debe asegurarse de que el evento de carga finalice y de que los datos se envíen a su matriz antes de continuar con la llamada de Axios.

 try { const file = values.beleg1; const reader = new FileReader(); reader.readAsDataURL(file); // construct a promise that will resolve once loading is complete, // and then wait for it, so that we don't make the axios call until // after the loading is done. await new Promise<void>((resolve, reject) => { reader.onload = function () { const result = reader.result.toString().split(',')[1]; valuesObj.push({ name: 'base64Image', value: result }); // notify that the promise has completed its work resolve(); }; reader.onerror = function () { // notify that the promise failed and pass along the error object reject(reader.error); }; }); // I picked any since I don't want to define out the full type, but you probably should const response: any = await axios({ url: 'http://localhost:8080/createPDF', method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, responseType: 'blob', data: valuesObj, }); setLoadingText(''); const blob: Blob = new Blob([response.data], { type: 'application/pdf' }); const objectUrl: string = window.URL.createObjectURL(blob); window.open(objectUrl); } catch (error) { // all errors during the processing are caught in one place console.log('Error: ', error); }

Tenga en cuenta que puse todo en estilo async/await, excepto el objeto Promise requerido, y tengo un solo bloque try-catch. Si desea procesar errores a un nivel más alto de granularidad, divídalo en varios bloques de prueba y captura.

Cuando nos aseguramos de esperar cada acción asíncrona, nos aseguramos de no iniciar la siguiente hasta que hayamos terminado con la anterior, por lo que todo se hace en orden.

Su problema parece ser que su solicitud axios asíncrona obtiene el valor de su valueObj, antes de que onload agregue su nuevo registro.

Lo siento, olvidé una solución ^^

O pones tu solicitud de axios directamente en la tubería...

 reader.onload = (async function () { const result = reader.result.toString().split(',')[1] await valuesObj.push({ name: 'base64Image', value: result}) return valuesObj }) .then( data => axios({ url: 'http://localhost:8080/createPDF', method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, responseType: 'blob', data, }) .then((response: AxiosResponse) => { setLoadingText('') const blob: Blob = new Blob([response.data], { type: 'application/pdf' }) const objectUrl: string = window.URL.createObjectURL(blob) window.open(objectUrl) }) .catch(console.log)) ) })

o crea otra función asíncrona a la que puede llamar desde su onload o desde otro fn asíncrono, que espera ambos eventos asíncronos.