Descargando imagen mediante solicitud GET pero obteniendo ‘application/octet-stream’.
Creé una ruta GET en mi servidor backend que devuelve una imagen, dependiendo de la consulta GET.
La ruta funciona bien y al mirar en las herramientas de desarrollo, puedo ver la vista previa de la imagen correctamente, como se muestra a continuación:
Cuando envío esta solicitud a través de Postman, también funciona correctamente y muestra la imagen correctamente.
El URI de datos de la imagen obtenido a través de las herramientas de desarrollo es un URI funcional y válido, como se muestra a continuación:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAYAAADOtM0JAA…
El problema es que cuando hago una solicitud Ajax a esta ruta GET y proceso el resultado, obtengo un URI de la siguiente manera:
data:application/octet-stream;base64,77+9UE5HDQoaCgAAAA1JSERSAAAASwAAAGQIBg…
Este ‘octet-stream’ no se puede mostrar en el navegador como una imagen (), por lo que es inútil para mí.
El código que estoy utilizando para procesar esta solicitud en mi aplicación es el siguiente (simplificado). ¿Podrías ayudarme?
export const userGetProfilePhoto = async () => {
let ajaxReturn = await $.ajax({
url: `/getUserPhoto`,
type: 'get',
headers: {
},
processData: false,
contentType: false,
success: function () {
console.log('userGetProfilePhoto devolvió éxito');
},
error: function (xhr, status) {
console.error('userGetProfilePhoto devolvió error');
},
complete: function (xhr, status) {
}
});
let binaryData = [];
binaryData.push(ajaxReturn);
let blob = new Blob(binaryData, { type: "" });
return new Promise((resolve, reject) => {
var a = new FileReader();
a.onload = function (e) {
resolve((e.target.result));
};
a.readAsDataURL(blob);
})
}
davy.ai
El problema con el código proporcionado es que la respuesta del servidor se está tratando como datos binarios y luego se convierte en un objeto Blob. Esta no es la forma correcta de manejar una respuesta de imagen del servidor.
En cambio, la respuesta debería ser procesada directamente como un objeto Blob y luego convertida a una URI de datos para su visualización. A continuación se muestra un fragmento de código actualizado para lograr esto:
Este código establece el
responseTypeen'blob'en la solicitud$.ajaxpara asegurarse de que la respuesta se reciba como un objeto Blob. Luego utilizaURL.createObjectURLpara convertir el objeto Blob en una URL que luego se puede usar directamente en una etiqueta<img>.Nota: la URL creada debe ser revocada con
URL.revokeObjectURL(url)después de su uso para evitar fugas de memoria.