我无法显示上传并保存在数据库中的图像

Question

我正在尝试使用multer、mongoose 和express 上传图像。上传的图像保存在MongoDB 数据库中，但我稍后无法显示。它说找不到指定的文件并在console 中给出404 error 这是我的app.js：

var express = require("express"), 
app = express(),
bodyParser = require("body-parser"),
mongoose = require("mongoose");
var multer = require('multer')

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + file.originalname);
  }
})  

var upload = multer({ storage: storage, 
    limit: {
        fileSize: 5000 * 5000 * 60
    },
    fileFilter: fileFilter
});

var fileFilter = (req, file, cb) => {
    if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
        cb(null, true);
    } else {
        cb(null, false);
    }
};

mongoose.connect("mongodb://localhost/restfulblog", {useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false});

app.set("view engine", "ejs");
app.use(express.static("public"));
app.use("uploads/", express.static("uploads"));
app.use(bodyParser.urlencoded({extended: true}));
app.use(sanitizer());
app.use(methodOverride("_method"));


var blogSchema = new mongoose.Schema({
    title:      String,
    image:      String,
    body:       String,
    createDate: {type: Date, default: Date.now}
});

var blog = mongoose.model("blog", blogSchema);

app.get("/", function(req, res) {
    res.redirect("/blogs");
})

// 1 INDEX ROUTE
app.get("/blogs", function(req, res) {
    blog.find({}, function(err, blogs) {
        if(err) {
            console.log(err);
        } else {
            res.render("index", {blogs: blogs});
        }
    });
});

// 2 NEW ROUTE
app.get("/blogs/new", function(req, res) {
    res.render("new");
});

// 3 CREATE ROUTE
app.post("/blogs", upload.single("image"), function(req, res) {
    console.log(req.file.path);
    var title = req.body.title;
    var image = req.file.path;
    console.log(image)
    var body = req.body.body;
    var newBlog = {title: title, image: image, body: body};
    blog.create(newBlog, function(err, newBlog) {
        if(err) {
            console.log(err.message);
            res.redirect("new");
        } else {
            res.redirect("back");
        }
    });
});

这是我的 ejs 文件

<%- include("partials/header")%>
<div class="ui main text container">
    <div class="ui huge header">Naruto Blog App</div>
    <div class="ui top attached segment">
        <div class="ui divided items">
            <% blogs.forEach(function(blog) { %>
                <div class="item">
                    <div class="image">
                        <img src="<%= blog.image %>">   
                    </div>
                    <div class="content">
                        <a class="header" href="/blogs/<%= blog._id%>"><%= blog.title %></a>
                        <div class="meta">
                            <span><%= moment(blog.createDate).format('MMMM D, YYYY') %></span>
                        </div>
                        <div class="description">
                            <p><%= blog.body %>...</p>
                        </div>
                        <div class="extra">
                            <a class="ui floated orange button" href="/blogs/<%= blog._id%>">Read More <i class="hand point right outline icon"></i></a>    
                        </div>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
</div>

<%- include("partials/footer")%>

请帮我解决问题

Answer 1

查看 Express 的 static 函数，似乎根参数中的斜杠应该移到开头！我移动了它并在我的机器上测试了你的代码，它工作正常！

app.use('/uploads', express.static('uploads'));

获取 localhost:3000/uploads/testimage.jpg 返回图片！

希望我有所帮助