Отображение загруженных изображений на шаблон из базы данных - PullRequest
Новая
       21

Отображение загруженных изображений на шаблон из базы данных

1 голос
/ 14 марта 2019

Я работаю над проектом с использованием Node.js, Express, MongoDB, EJS и Multer.Я новичок в Node, и я впервые использую multer, я успешно смог загрузить отдельные изображения в мою базу данных mongodb, используя mongoose и multer, они появляются в моем файле назначения, destination: './static/uploads', а также в db,как я проверил, используя оболочку mongodb, после загрузки.Затем, после использования 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 });
    })
});

Вот что за console.log () из GET Route: 

{ 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>

Я считаю, что это вся необходимая информация, я был бы рад ответить на любые вопросы или предоставить дополнительную информацию.Большое спасибо!

...