Question

我有一个简单的应用程序，它从用户那里获取标题、描述和图像 multer 处理图像上传部分，我在名为 public 的静态文件夹中获取图像及其子文件夹上传.然后它在数据库中。我在数据库中找到它并尝试渲染图像，但图像未渲染。虽然它存在于上传文件夹中，但它没有呈现。这是我的代码。

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const mongoose = require("mongoose");
const multer = require("multer");
const fs = require("fs");
const path = require("path");

//APP use
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname+"./public/"));

//Multer Setup
const storage = multer.diskStorage({
    destination: "./public/uploads/",
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '_' + Date.now()+path.extname(file.originalname));
    }
});
const upload = multer({ storage: storage }).single("img");




//Mongoose Setup
mongoose.connect('mongodb://localhost:27017/project-1', {useNewUrlParser: true, useUnifiedTopology: true}).then(console.log("Successfully connected to the server"));

//Routes
app.get("/", (req, res)=>{
    BlogModel.find({}, function(err, foundItem){
        if(err){
            console.log(err);
        }else{
            console.log(foundItem);
            res.render("home", {foundItem : foundItem});
        }
    })
    
});
app.get("/creat", (req, res)=>{
    res.render("creat");
});
app.post("/creat", upload ,(req, res)=>{
    const data = new BlogModel({
        heading: req.body.name,
        desc: req.body.desc,
        img: req.file.filename
    });
    data.save((err)=>{
        if(!err){
            res.redirect("/");
        }else{
            console.log(err);
        }
    });
    console.log("Successfully Submited The Form");
});


//Database Schema
const Blogschema = new mongoose.Schema({
    heading: String,
    desc: String,
    img: String
});

//Database Model
const BlogModel = new mongoose.model("Image", Blogschema);







//Listen On Port 3000
app.listen(3000, ()=>{
    console.log("Listening on port 3000");
});

<%- include('partials/header'); -%>



<% foundItem.forEach(function(item){ %>
        
    <h1><%= item.heading %></h1>
    <p><%=item.desc%></p>
    <img src="./uploads/<%=item.img%>" alt="image">

<%})%>



<%- include('partials/footer'); -%>

Here it is stored in the public Folder inside Uploads Here is the error. 抱歉，如果代码太长。

Answer 1

尝试为静态文件夹名称添加“public”

app.use(express.static("public"));

或者如果你想使用 __dirname，

app.use(express.static(path.join(__dirname, 'public')))

图像未在 ejs 中呈现

1 个答案: