Question

我正在使用Node.js，Express，MongoDB，EJS和Multer进行项目。我是Node的新手，这是我第一次使用multer，我已经能够使用mongoose和multer成功地将单个图像上传到mongodb数据库，它们出现在我的目标文件destination: './static/uploads'和db，正如我在上传后使用mongodb shell检查的那样。然后，在使用GET请求查找所有图像之后，我被困在尝试在GET请求查找所有照片并使用for循环显示后在页面上显示图像，我似乎在这部分上找不到太多信息主题。如果有人可以根据下面的路线和观点告诉我我要去哪里，或者向我提供有关该主题的信息源，我将不胜感激。

这是我的server.js文件的关键部分：

// Set Storage Engine and Changing filename
const storage = multer.diskStorage({
    destination: './static/uploads',
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})

// Init Upload
const upload = multer({
    storage: storage,
    fileFilter: function (req, file, cb) {
        checkFileType(file, cb);
    }
}).single('file');

// Validate Image Type
function checkFileType(file, cb) {
   const filetypes = /jpeg|jpg|png|gif/;
   const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    const mimetype = filetypes.test(file.mimetype);

    if (mimetype && extname) {
        return cb(null, true);
    } else {
       cb(new Error("Images only!"));
    }

    app.use(express.static(path.join(__dirname, './static')));
}

这是有问题的路线。也在我的server.js中。

//Post route to upload image and add to database
app.post('/new-image', (req, res) => {
    if (req.file && req.body) {
        let msg = "Fields Required";
        console.log("Fields were null");
        res.render("admin.ejs", { msg: msg });
    } else {
        upload(req, res, (err) => {
            if (err) {
                console.log("ERROR: ", err);
                res.render('admin.ejs', { msg: err });
            } else {
                var image_inst = new Image({ 
                    title: req.body.title, 
                    filename: req.file.path, 
                    briefDesc: req.body.breifdesc, 
                    description: req.body.desc 
                });
                console.log("image inst: ", image_inst)
                image_inst.save(function (err) {
                    if (err) {
                        console.log('something went wrong', err);
                    } else {
                        console.log('successfully added a Image!');
                        res.redirect('/admin');
                    }
                })
            }
        });
    }
});

//GET Route to display on index page
app.get('/', function (req, res) {
    Image.find({}, function (err, data) {
        if(err) {
            console.log("something went wrong", err);
        } else {
            var image = { image: data };
            console.log(image);
            console.log(data);
        }

        res.render('index.ejs', { image: image });
    })
});

这是GET路由中的console.log（）：

{ image:
[ { _id: 5c897086af2ef22e4cfc77e7,
   title: 'test',
   filename: 'static\\uploads\\file-1552511110186.jpg',
   briefDesc: 'test',
   description: 'test',
   __v: 0 } ] }
[ { _id: 5c897086af2ef22e4cfc77e7,
    title: 'test',
    filename: 'static\\uploads\\file-1552511110186.jpg',
    briefDesc: 'test',
    description: 'test',
__v: 0 } ]

我不确定为什么文件名在目录之间有两个“ \”，我认为这可能是问题的根源，但我不确定为什么会这样。

这是index.ejs我试图显示图像的部分。

<% for (var i in images) { %>
<figure class="effect-portfolio wow fadeIn" data-wow-duration="2s">
    <img src="<%= images[i].filename %>" alt="02_img" /> <!-- image -->
    <figcaption>
        <!-- Caption -->
        <h2><%= images[i].title %></h2>
        <p><%= images[i].description %></p>
        <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">View more</a>

    </figcaption>
</figure>

我相信这是所有相关信息，我很乐意回答任何问题或提供更多信息。非常感谢！

在数据库中的模板上显示经机工上传的图像

0 个答案: