"Cannot read property 'contentType' of undefined"

Question

过去一周我一直在开发一个图片分享社交媒体应用程序。一切都很顺利，直到我不得不实现从数据库中检索图像。

我不断收到“无法读取未定义的属性 'contentType'”错误，

数据分配给“contentType”，
因为此时数据库中没有图像，它甚至不应该查找 contentType。（示例见代码）

如果有人能帮助指引正确的方向，那就太好了！

仅供参考：数据库中有 no 图像。上传工作非常好，只是导致问题的检索 - 是的，我知道，您无法检索 不存在 的图像，但它甚至不应该寻找 contentType首先。

代码如下：

Index route（这是错误发生的路由）

// @ROUTE: Home Route
// @DESCRIPTION: Renders the homepage
server.get('/', (req, res)=> {
    filesDB.find({}, (err, data)=> {
        if(err) {
            throw err
        }

        if(!data) {
            console.log("No Images")
        } else if(data) {
            res.render('Home.ejs', {
                pageTitle: "Home :: ImgHub",
                curSession: req.session,
                images: [data]
            })
        }
    })
})

Home.ejs

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= pageTitle %></title>
    </head>
    <body>
        <header>
            <%- include('./Partials/Header.ejs') %> 
        </header>
        <main>
            <% if(images.length > 0) { %>
                <% images.forEach((images)=> { %>
                    <div>
                        <img src="data:images/<%= images.img.contentType %>;base64, <%= images.img.data.toString('base64') %>">
                    </div>
                <% }) %>
            <% } else { %>
                <h2>No Images Found...</h2>
            <% } %>
        </main>
    </body> 
</html>

上传Post

// @POST: Upload Post
// @DESCRIPTION: Saves the image's data onto the database.
server.post('/api/upload', fileUpload.single('fileInput'), (req, res)=> {
    const newFile = new filesDB({
        img: {
            data: fs.readFileSync(path.join(__dirname + '/Uploads/' + req.file.filename)),
            contentType: 'image/png'
        },
        uploader: req.session.username
    })

    newFile.save((err, data)=> {
        if(err) {
            throw err
        } else {
            console.log(`> ${req.session.username} has uploaded: ${req.file.filename}`)
            res.redirect('/')
        }
    })
})

上传文件架构和模型

const mongoose = require('mongoose')

const fileSchema = new mongoose.Schema({
    img: {
        data: Buffer,
        contentType: String
    },
    uploader: String
}, {timestamps: true})

const fileModel = new mongoose.model('file', fileSchema)
module.exports = fileModel

错误

TypeError: D:\Github Repositories\Repositories\ImgHub\ImgHub\views\Home.ejs:17
    15|                 <% images.forEach((images)=> { %>

    16|                     <div>

 >> 17|                         <img src="data:images/<%= images.img.contentType %>;base64, <%= images.img.data.toString('base64') %>">

    18|                     </div>

    19|                 <% }) %>

    20|             <% } else { %>


Cannot read property 'contentType' of undefined
    at eval (eval at compile (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\ejs\lib\ejs.js:662:12), <anonymous>:24:37)
    at Array.forEach (<anonymous>)
    at eval (eval at compile (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\ejs\lib\ejs.js:662:12), <anonymous>:21:15)
    at Home (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\ejs\lib\ejs.js:692:17)
    at tryHandleCache (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\ejs\lib\ejs.js:272:36)
    at View.exports.renderFile [as engine] (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\ejs\lib\ejs.js:489:10)
    at View.render (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\express\lib\view.js:135:8)
    at tryRender (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\express\lib\application.js:640:10)
    at Function.render (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\express\lib\response.js:1012:7)
    at D:\Github Repositories\Repositories\ImgHub\ImgHub\server.js:94:17
    at D:\Github Repositories\Repositories\ImgHub\ImgHub\node_modules\mongoose\lib\model.js:5068:18
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

图像模型 https://i.imgur.com/efHHRc9_d.webp?maxwidth=760&fidelity=grand

Answer 1

在 mongo 集合上调用 find 时，如果找不到数据，它将 return 一个空数组。然后，您的支票：

if(!data) {
    console.log("No Images")
} else if(data) {
    res.render('Home.ejs', {
        pageTitle: "Home :: ImgHub",
        curSession: req.session,
        images: [data]
    })
}

将在其他情况下使用，因为 [] 是真实的。并且在调用 render 时，images 属性将为 [[]]，因此长度为 1 并通过 images.length > 0 检查。

将您的代码更改为以下内容，您应该会看到您想要的内容

if(data.length === 0) {
    console.log("No Images")
} else {
    res.render('Home.ejs', {
        pageTitle: "Home :: ImgHub",
        curSession: req.session,
        images: data
    })
}

Answer 2

根据 Mongoose API，您的 filesDB.find returns 一个数组对象，而不仅仅是一个对象。因此，您的 images: [data] 不正确，您需要使用：

        if(!data.length) {
            console.log("No Images")
        } else {
            res.render('Home.ejs', {
                pageTitle: "Home :: ImgHub",
                curSession: req.session,
                images: data,
            })
        }

"Cannot read property 'contentType' of undefined"

"Cannot read property 'contentType' of undefined"

javascript

ejs

mongoose

node.js

multer