Bagaimana saya bisa mengakses file gambar di MongoDB dan mengirimkannya ke klien menggunakan Express.js

Question

Saya menyimpan beberapa file gambar di MongoDB menggunakan luwak. Gambar dikirim dari formulir HTML, dan kemudian dikirim ke MongoDB melalui permintaan Express POST. Kemudian, saya ingin mengakses file gambar tersebut di MongoDB melalui permintaan GET dan kemudian mengirimkannya ke sisi klien. Kode untuk ini terlihat seperti ini:

app.get("/showallimages", (req, res) => {

    Image.find({}).exec((error, records) => { // Image is the database schema model. 

        var img1 = Buffer.from(records[0].img.data, "base64"); // First image coming from MongoDB.
        var img2 = Buffer.from(records[1].img.data, "base64"); // Second image coming from MongoDB.
        var images = [img1, img2];

        res.writeHead(200, {
            "Content-Type": "image/png",
        })

        var i = 0;
        for (i; i <= images.length; i++) {
            res.end(images[i]); // I am expecting this to send both images to the client side, but instead I am only getting the first image to be displayed. 
        }

    })

})

Jika saya konsol.log "gambar", saya mendapatkan data biner dari kedua file:

console.log(images); 

  <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 02 00 00 64 00 64 00 00 ff ec 00 11 44 75 63 
6b 79 00 01 00 04 00 00 00 22 00 00 ff ee 00 0e 41 64 6f 62 65 00 64 ... 8728 more bytes>,
  <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 05 39 00 00 03 84 08 06 00 
00 00 6a f3 35 f1 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 00 f2 ... 397757 more bytes>

Saya mengharapkan ini untuk mengirim kedua gambar ke sisi klien, tetapi saya hanya mendapatkan gambar pertama yang akan ditampilkan.

Setiap penjelasan tentang bagaimana saya dapat mengirim lebih dari satu file dalam proses ini sangat kami hargai. Beri tahu juga jika saya memilih cara yang tepat untuk mencapai ini.

Terima kasih!

Answer 1

Kode Anda mengalami kesalahan logika. ketika res.end () dipanggil, express mengakhiri proses respon pada gambar pertama, loop Anda tidak mencapai iterasi berikutnya. Anda juga tidak dapat memiliki beberapa tanggapan untuk satu permintaan. Tapi Anda bisa mengirim array Buffer dengan representasi JSON menggunakan res.json(images).

Di klien , untuk menampilkan gambar yang diterima sebagai buffer dari server: Anda perlu mengonversinya ke format asli dengan melakukan ini:

// server response
const images = response.map(buffer => {
  const rawBuffer = buffer.toString("base64");
  const imageSrc = "data:image/png;base64," + rawBuffer;
  const image = document.createElemment("img");
  image.src = imageSrc;
  return image;
})

/* 
In this method you can control how you will show the images in the client 
(to test, just append to any div)
*/

Atau, jika Anda hanya ingin menampilkan gambar tanpa manipulasi, coba ini:

app.get("/showallimages", (req, res) => {

    Image.find({}).exec((error, records) => { // Image is the database schema model. 

        var img1 = Buffer.from(records[0].img.data, "base64"); // First image coming from MongoDB.
        var img2 = Buffer.from(records[1].img.data, "base64"); // Second image coming from MongoDB.
        var images = [img1, img2];

        const formatedImages = images.map(buffer => {
          return `<img src="data:image/png;base64,${buffer.toString("base64")}"/>`
        }).join("")
        
        res.send(formatedImages)

    })

})