node - Cargar imagen de Binary(Javascript-Ajax-MongoDB)

save image mongoose

Question

Tengo una imagen guardada en un MongoDB. El modelo es el siguiente:

picture: {
    metadata: {
        name: { type: String, default: null },
        comment: { type: String, default: null },
        publisherID: { type: String,default: null },
        date: { type: Date, default: Date.now },
        size: { type: Number,default: 0 },
        type: { type: String, default: null }
    },
    data: { type: Buffer, default: null },
    tags: Array
}

Ahora necesito cargar la imagen nuevamente desde el DB.

Hago una llamada AJAX y solicito la imagen con la identificación.

        $.ajax({
        type: "POST",
        url: window.location.origin + ''/picture'',
        contentType: ''application/json'',
        dataType: ''json'',
        async: true,
        data: JSON.stringify({ id: id }),
        success: function (result) {
            console.log(result);
            a = result;

            var img = result.result[0].picture.data.join("").toString(''base64'');
            img = "data:" + result.result[0].picture.metadata.type + ";base64," + img;

            $(''#img'').attr(''src'', img);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(''error '' + textStatus + " " + errorThrown);
            success = false;
        }
    });

Y este es el controlador en el servidor

    var Picture = require(''../models/picture'');
Picture.find({ "_id": req.body.id}, function (err, pic) {
    if (err || !pic)
        res.end(JSON.stringify({ result: "error" }));

    if (pic) {
        console.log(pic);
        res.end(JSON.stringify({ result: pic }));
    }
})

He traducido los datos binarios en base64 pero la imagen no se muestra. (Tuve que unirme a los datos binarios porque entraron en una matriz). Hay algunas otras publicaciones similares, pero no tienen nada que no haya hecho (creo).

Answer 1

Como se indicó en los comentarios, es mejor tener un punto final separado en su aplicación para hacer que estas llamadas se "parezcan" a solicitudes de archivos estáticos estándar. Entonces, lo primero que haría es cambiar un poco tu esquema:

picture: {
    metadata: {
        name: { type: String, default: null },
        comment: { type: String, default: null },
        publisherID: { type: String,default: null },
        date: { type: Date, default: Date.now },
        size: { type: Number,default: 0 },
        type: { type: String, default: null }
    },
    path: { type: String, required: true },
    mime: { type: String, required: true },
    data: { type: Buffer, default: null },
    tags: Array
}

Entonces eso agrega dos campos que identificarán la "ruta" a la imagen para que coincida, y "mime" como el tipo mime del archivo. Así que "ruta" es un identificador más "amigable" que un _id y el "tipo mímico" se establecerá en insertar para que coincida con el tipo de contenido devuelto.

Luego configura una ruta para servir el contenido:

app.get(''/images/:imgname'', function(req,res) {

    Picture.find({ "picture.path": req.param("imgname") }, function(err,pic) {
        if (err) // checking here

        // Sending response        
        res.set(''Content-Type'', pic.mime);
        res.send( pic[0].picture.data );
    }); 

})

Entonces cuando hiciste una solicitud como:

  wget http://localhost:3000/images/test.png

Esto sucedería:

• Encuentre la "ruta" de matización del documento para "test.png"

• Asigne la propiedad del documento para "picture.mime" como Content-Type para la respuesta

• Enviar los datos binarios nuevamente como la respuesta

Entonces, para el cliente, la respuesta es un archivo real, y el punto es que ese "navegador" puede almacenarlo en caché y no afectar a su aplicación donde la copia "en caché" sea válida.

Si está integrando datos codificados en Base64 en respuestas JSON, perderá esa parte importante y enviará los datos en todo momento. También es un proceso muy complicado de manejar, como habrás descubierto.