MongoDBの画像ファイルにアクセスし、Express.jsを使用してクライアントに送信するにはどうすればよいですか?
Aug 18 2020
私はmongooseを使用していくつかの画像ファイルをMongoDBに保存しました。画像はHTMLフォームから送信され、ExpressPOSTリクエストを介してMongoDBに送信されます。次に、GETリクエストを介してMongoDB内のこれらの画像ファイルにアクセスし、クライアント側に送信します。このためのコードは次のようになります。
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.
}
})
})
console.log“ images”の場合、両方のファイルのバイナリデータを取得します。
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>
これにより両方の画像がクライアント側に送信されることを期待していますが、代わりに最初の画像のみが表示されます。
このプロセスで複数のファイルを送信する方法についての説明はありがたいです。また、これを達成するための正しい方法を選択しているかどうかもお知らせください。
ありがとう!
回答
1 Victor_Maciel Aug 20 2020 at 19:16
コードに論理エラーがあります。res.end()が呼び出されると、expressは最初の画像の応答プロセスを終了し、ループは次の反復に到達しません。また、1つのリクエストに対して複数の応答を持つことはできません。ただし、を使用してJSON表現でBuffer配列を送信できますres.json(images)
。
クライアントで、サーバーからバッファーとして受信した画像を表示するには、次のようにして画像を元の形式に変換する必要があります。
// 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)
*/
または、操作せずに画像を表示したいだけの場合は、次のことを試してください。
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)
})
})