首页 > 解决方案 > 如何在猫鼬/节点中动态显示图像作为帖子页面的背景图像?

问题描述

这是我在这里的第一个问题,我是 Nodejs 的新手。我希望有人可以帮助我解决这个问题。我正在使用 mongoose、node、ejs 和 express 创建一个简单的博客网站,我想使用多部分表单上传图像,然后将该图像保存到本地目录,以便它可以在我的个人帖子页面。我已经尝试过 express-fileupload 和 Multer,但图像无法在后台显示。但是它被保存到本地目录。我错过了什么或做得不对?这是我的代码片段:

我的服务器代码

//jshint esversion:6

const express = require("express");

const bodyParser = require("body-parser");

const ejs = require("ejs");

const mongoose = require('mongoose');

const multer  = require('multer');
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
var storage = multer.diskStorage({
destination: function (req, file, cb) {
      cb(null, 'public/posts');

 },
 filename: function (req, file, cb) {
     cb(null, file.fieldname + '-' + Date.now());
 }});


 const upload = multer({ storage: storage});

数据库代码:

const  PostSchema =  new mongoose.Schema({
title: String,

description: String,

content: String,

username: String,

image: String,

createdAt: {
    type: Date,

    default: new Date()
}
});

const Post = mongoose.model("post", PostSchema);

编写路线:

app.get("/compose", function(req,res){

res.render("compose");

});

app.post('/compose', function (req, res) {
  const post = new Post({
      title: req.body.title,
      username: req.body.username,
      content: req.body.content,
      image: req.file.image
      });

  post.save(function(err){

     if(!err){

      res.redirect("/");
    }
     });
  });

app.get('/post/:id', function(req,res){

const requestedPostId = req.params.id;

 Post.findOne(

  {_id: requestedPostId}, 

  function(err, foundPost) {

       if (!err) {

       res.render("post", {post: foundPost});
    }

  });
});

我的帖子的 Ejs 代码:

<header class="masthead" style="background-image:url('<%=post.image'%>)">

<div class="overlay"></div>

<div class="container">

  <div class="row">

    <div class="col-lg-8 col-md-10 mx-auto">

      <div class="post-heading">

        <h1><%=post.title%></h1>

        <span class="meta">Posted by

              <a href="#"><%=post.username%></a>

              on <%=post.createdAt.toDateString()%>

            </span>
      </div>

    </div>

  </div>


</div>

形式:

      <input type="file" name="image" class="form-control-file">

    </div>

期待任何更正!谢谢

标签: node.jsexpressmongooseejsmulter

解决方案


推荐阅读