“image.forEach 不是函数”即使它是？答案

【问题标题】："image.forEach is not a function" even though it is?“image.forEach 不是函数”即使它是？
【发布时间】：2021-07-26 08:38:14
【问题描述】：

我最近在使用 EJS 时遇到了这个奇怪的问题。我正在尝试制作一个简单的自制网络图像服务器，一切顺利。我可以上传和存储图像，但无法检索。

我得到一个“image.forEach”不是函数错误，即使我设置为一个函数。

这里是后端：

//Routes
app.get('/', (req, res)=> {
    imageUpload.find({}, (err, data)=> {
        if(err) {
            console.log(err)
            res.status(500)
        } else {
            console.log('> ' + req.ip + " connected to: " + req.url)
            res.render('index.ejs', {
                title: 'Home :: Image Server',
                version: settings.VERSION,
                image: data
            })
        }
    })
})

app.post('/upload', upload.single('img'), (req, res)=> {
    const newImageUpload = new imageUpload({
        img: {
            data: fs.readFileSync(path.join(__dirname + '/uploads/' + req.file.filename)),
            contentType: 'image/png'
        }
    })

    newImageUpload.save((err, data)=> {
        if(err) {
            console.log(err)
            res.status(500)
        } else {
            console.log('> Image succesfully uploaded.')
            res.redirect('/')
        }
    })
})

app.get("/images/:id", (req, res)=> {
    const id = req.params.id

    imageUpload.findById(id, (err, data)=> {
        if(err) {
            console.log(err)
        } else {
            console.log('> ' + req.ip + " connected to: " + req.url)
            res.render('image.ejs', {
                title: 'Home :: Image Server',
                image: data
            })
        }
    })
})

我可以毫无问题地通过“/”路由将图像检索到索引，但在“/images/:id”路由上出现错误。

这里是“image.ejs”文件：

<!DOCTYPE html>
<html>
    <head>
        <%= title %> 
    </head>
    <body>
        <% image.forEach((image)=> { %>
            <div>
                <img src="data:image/<%=image.img.contentType%>;base64, <%=image.img.data.toString('base64')%>">
            </div>
        <% }) %> 
    </body>
</html>

我尝试使用 async 和 await，但无法加载路由。如果有人可以帮助我，将不胜感激！

【问题讨论】：

标签： node.js mongodb express ejs multer

【解决方案1】：

您的问题是image.forEach 中的image 应该是一个数组。当您在 / 路由中使用 .find 时，它会起作用，因为 .find 将 data 的 array 发送到它的回调函数。另一方面，在您的 /images/:id 路由中，您的 .findById 函数返回的是图像对象而不是数组（当您尝试通过唯一标识符查找某些内容时，这是预期的，它应该只返回一个内容）。如果您想为两条路由保留单个 ejs 文件，这可以通过检查您的 ejs 是否是一个数组（使用 ejs 中的 if 语句和 Array.isArray(image) 检查之类的东西）或始终发送一个数组来解决，即使只有一个对象。当然，如果您想使用单独的 ejs 文件，您可以随时为/images/:id 路线做@MohamedOraby 的答案，为您的/ 路线做您之前的答案。

例如，如果您想始终发送数组并保持 ejs 原样，您可以这样做/images/:id 路由：

app.get("/images/:id", (req, res)=> {
    const id = req.params.id

    imageUpload.findById(id, (err, data)=> {
        if(err) {
            console.log(err)
        } else {
            console.log('> ' + req.ip + " connected to: " + req.url)
            res.render('image.ejs', {
                title: 'Home :: Image Server',
                image: [data] // this line changed from `image: data` to `image: [data]`
            })
        }
    })
})

尽管我可能不会立即回复，但请随时问我澄清问题。

【讨论】：