2015-05-09 72 views
1

我正在學習node.js,我正在創建一個小應用程序,可以在其中上載圖像並將其顯示在圖庫中。使用mongoose顯示來自mongodb的圖像

目前,我有它通過POST

extends ../layout 
block content 
.col-sm-6.col-sm-offset-3 
    h1 control panel 
    form(action="/upload", method="POST", 
    enctype="multipart/form-  data") 
     input(type="file", name='image') 
     input(type="submit", value="Upload Image") 

的圖像上傳到服務器該文件然後用貓鼬

exports.upload = function (req, res) { 
fs.readFile(req.files.image.path, function (err, data) { 
    var imageName = req.files.image.name; 
    if(!imageName){ 
     console.log("seems to be an 
     error this file has not got a name"); 
     res.redirect("/"); 
     res.end(); 

    }else{ 
     var newimage = new Image(); 
     newimage.img.data = fs.readFileSync(req.files.image.path); 
     newimage.img.name = imageName; 
     newimage.save(function (err, a) { 
       if (err){ 
        console.log("There was an error saving the image") 
        res.redirect("/"); 
        res.end(); 
       } 
     res.redirect("/gallery"); 
     }); 
    }  
    }); 
    } 

在我的畫廊控制器I查詢數據庫插入到MongoDB的一種形式對於所有的圖像並將它們傳遞給前端。

exports.gallery = function (req, res) { 
Image.find({}, function(err, image){ 
if (err) 
    res.send(err); 
else 
    res.render("site/gallery", {images: image }); 
}); 
} 

然後在我的畫廊我嘗試對於每一幅圖像

extends ../layout 
block content 
h1 Gallery 
    each image in images 
    img(src='#{image.img.data}') 

我的問題是,我不斷收到一個404錯誤,因爲瀏覽器無法找到圖像中創建一個新的形象標籤。 但我有一種感覺,我可能會以這種錯誤的方式去做。我已經看到GridFS,但是我覺得它不適合這個應用程序,因爲圖庫中的圖像數量將小於20。我是採取正確的方式來做到這一點,還是應該將圖像存儲在服務器上並以這種方式檢索它們?

回答

0

您通常會將圖像上傳到服務器的機器文件系統或靜態資產雲託管服務(如AWS S3),並且只在數據庫中存儲圖像的URL

您也可以使用像Cloudinary這樣的解決方案。