Recibo un archivo json y una imagen desde el backend con datos de formularios/partes múltiples y tengo que analizarlo en el frontend.

 --47f5d03f-8473-428e-a4e7-11e2a0710dc2 �PNG gAMA���\@�! :����OZ�h���c�}�Յ��+.���* (etc with this data) --47f5d03f-8473-428e-a4e7-11e2a0710dc2 {"CustomerId":"123","Title":"This is title","Name":"This is name"} --47f5d03f-8473-428e-a4e7-11e2a0710dc2--

Json se analiza perfectamente, pero tengo un problema con la creación de imágenes. Pero Blob siempre me da un error cuando trato de usarlo para crear un elemento de imagen. Así es como traté de hacer esto.

 API.post(`api/endpoint`, data).then((resp) => { const boundIndex = resp.headers['content-type'].indexOf('boundary="') + 'boundary='.length; const contentType = resp.headers['content-type'] const bound = contentType.slice(boundIndex,contentType.length); const boundary = '--' + bound.slice(1, bound.length - 1); const splitedResponseData = resp.data.split(boundary); const jsonResponse = JSON.parse(splitedResponseData[2]); const blob = new Blob([splitedResponseData[1]], { type: 'image/png' }); const blob1 = new Blob([stringToUint(splitedResponseData[1])], { type: 'image/png' });

Blob1 está usando la función stringToUint() para convertir una cadena a Uint8Array.

 function stringToUint(stringData) { const string1 = btoa(unescape(encodeURIComponent(stringData))), charList = string1.split(''), uintArray = []; for (let i = 0; i < charList.length; i++) { uintArray.push(charList[i].charCodeAt(0)); } return new Uint8Array(uintArray); }

¿Estoy haciendo algo mal o hay otra forma de tomar una foto en función de los datos que obtengo?