“无法读取未定义的属性‘contentType’”

Posted

技术标签:

【中文标题】“无法读取未定义的属性‘contentType’”【英文标题】："Cannot read property 'contentType' of undefined" 【发布时间】：2021-10-06 20:58:31 【问题描述】：

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

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

    有数据分配给“contentType”，并且， 由于此时数据库中没有图像，它甚至不应该寻找contentType。 （参见代码示例）

如果有人可以帮助指导正确的方向，那就太好了！ ????

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

代码如下：

索引路由（这是发生错误的路由）

// @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: 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

【问题讨论】：

根据该错误，您从filesDB.find 返回的data 不包含.img 字段。 data 也是一个对象，还是一组对象？这可以解释问题。 @Kelvin Schoofs 这是一个对象数组。让我上传一张图片，让你看看模型的样子！ 如果它是一个对象数组，而您使用的是images: [data]，那么这就是问题所在。 我对我的一个旧项目做了同样的事情（我很乐意发送 github 的链接），而且效果很好。你知道我应该怎么做吗？ 我已经发布了带有文档链接的答案。您的data 确实是一个对象数组，而不仅仅是一个对象。这就是为什么你的.img 是未定义的，因为你基本上是在做[obj1, obj2, ...].img。 【参考方案1】：

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

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

将在 else 情况下进行，因为 [] 是真实的。并且调用render时，images属性为[[]]，所以长度为1，通过images.length &gt; 0校验。

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

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

以上是关于“无法读取未定义的属性‘contentType’”的主要内容，如果未能解决你的问题，请参考以下文章