Multer/Express/MongoDB 出现问题 - 文件正确保存到数据库，显示 404 错误

Question

我遇到了一个我无法解决的问题，尽管我在网上搜索了几个小时的答案。我正在使用 Node、Express、MongoDB、Multer 和 EJS 模板，我正在尝试将图像保存到数据库，然后在我的一个视图中使用它。

我最初在将文件正确保存到数据库时遇到了麻烦，但在这个站点的帮助下，我能够解决这个问题。但我现在的问题是，当我尝试在我的一个视图中使用它时，我不断收到一个奇怪的 404 错误，它的路径很奇怪：

无法获取： http://localhost:3090/project/%7B%20contentType:%20'image/png',%20%20data:%...b%2047%2044%2000%20ff%2000%20ff%2000%20ff%20a0%20bd%20a7%20...%20%3E%20 %7D 404（未找到）

这让我觉得它没有正确保存在数据库中，但在 Robomongo 中，它看起来像这样，这对我来说似乎是正确的：

所以，我可以看到它在 URL 中有我的内容类型，这显然是一个错误，但我不知道如何解决这个问题。

我有一些以前添加到该文件的图像没有保存到数据库中，并且使用相同的模板显示得很好，所以路径应该是正确的。

在此先感谢大家！！

我的 Index.JS 文件：

const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const mongoose = require('mongoose');
const path = require('path');


mongoose.Promise = global.Promise;

const router = require('./router');


//App Setup

const app = express();
app.set("view engine", "ejs");
app.use(express.static(path.join(__dirname, 'public')));
app.use(morgan('combined'));
app.use(bodyParser.urlencoded({extended:true}));



router(app);


//DB Setup
mongoose.connect('mongodb://localhost/projectsApp');
    mongoose.connection.on('open', () => {
  console.log('Connected to mongodb server.');
  mongoose.connection.db.listCollections().toArray(function (err, names) {
    if(err) {
        console.log(err);
    } else {
        console.log(names);
    }
   });
})




//Server Setup

const port = process.env.PORT || 3090;
const server = http.createServer(app);

server.listen(port);

router.js 文件：

const Project = require('./models/project');
const multer = require('multer');
const fs = require('fs');
const path = require('path');



var upload = multer({ dest: './public/img' })


module.exports = function(app) {

app.get('/admin', (req, res) => {
    Project.find({}, (err, projects) => {
        if(err) {
            console.log(err);
        } else {
            res.render('admin', {projects: projects});
        }
    })
});

app.post('/admin', upload.single('image'), (req, res) => {
        console.log(req.file);
        newProj = {
            title: req.body.title,
            tech: req.body.tech,
            url: req.body.url,
            shortDescription: req.body.shortDescription,
            longDescription: req.body.longDescription,
            image: { data: fs.readFileSync(req.file.path), contentType: 'image/png' }
        };


        Project.create(newProj, (err, proj) => {
                if(err){
                    console.log(err);
                } else {
                    console.log(proj);
                    res.redirect("/");
                }
        });

});



}

最后是视图，以防万一：

<% include ./partials/header%>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="project-div">
            <h1><%= project.title%></h1>
            </div>
        </div>
        <div class="col-sm-6">
            <img src='<%= project.image%>'/>

            <hr />
            <span><strong>URL: </strong> <a href="<%= project.url%>"><%= project.url%></a></span>
            </div>
    </div>
</div>

<% include ./partials/footer%>

Answer 1

您正尝试在模板中直接输出保存图像数据的对象。这行不通，因为这根本不是 html 的工作方式......

我建议为图像设置另一条路线，然后引用该图像。

app.get('/admin/projects/:id/image', (req, res, next) => {
  Project.find({ _id: req.params.id }, (err, result) => {
    if (err) return next(err)
    if (result.length === 0) return next()

    res.set('Content-Type', result[0].contentType)
    res.send(result[0].data)
  })
})

然后在您的模板中使用该网址：

...

<img src="/admin/projects/<%= project._id %>/image" />

...