寻找访问字符串的猫鼬数组

Posted 2023-03-10

【中文标题】寻找访问字符串的猫鼬数组

【英文标题】：Looking to access mongoose array of strings

【发布时间】：2016-10-05 14:19:34

【问题描述】：

我能够从我的架构中访问所有元素，除了对我来说很棘手的数组。当我上传图片并使用开发人员控制台查看图片的链接时，它会显示“/lock.png”类似的内容并且它不显示图片只是正确加载图片。所以基本上我需要帮助保存数组元素，然后为图像加载它们：[String]

谢谢

app.js

    var postSchema = new mongoose.Schema(
        title:String,
        price:Number,
        name: String,
        image: String,
        images: [String],
        desc: String

    )

app.post("/posts", function(req, res) 

    //get data from and add to posts array

    var title = req.body.title;
    var price = req.body.price;
    var image = req.body.image;
    var desc = req.body.desc;
    var images = req.body.images;

    var newPost =  title: title, price: price, images: images, image: image, desc: desc;

    //create new post and save to database
    postModel.create(newPost, function(err, newlyCreated) 
        if(err)
            console.log("error with new post");
        else
            res.redirect("/posts");
        
    );

    //posts.unshift(newPost);

在我的 ejs 文件中

<input name="images" class="uploadFile btn btn-primary btn-block" type="file" multiple id="gallery-photo-add" placeholder="Choose File" >


<% posts.forEach(function(post)  %>
                            <div class = "row">
                              <div class ="col-xs-8">
                                <p><%= post.title %></p>
                              </div>
                              <div class ="col-xs-4">
                                <p>$<%= post.price %></p>
                              </div>
                            </div>

                                <% if(post.image === "") %>

                               <%  else               %>
                                    <img class="img-rounded img-responsive half img-thumbnail" src="<%= post.image %>"> 
                                <%         %>


                            <img class="img-rounded img-responsive half img-thumbnail" src="<%= post.images %>">



                            <p><%= post.desc%></p>
                            <p>
                              <a href="/posts/<%= post._id %>" class="btn btn-md btn-primary ">More Info</a>
                            </p>

                    <% ); %>       

<script type="text/javascript">




$(function() 
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) 

        if (input.files) 
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) 
                var reader = new FileReader();

                reader.onload = function(event) 

                    $($.parsehtml('<img class="img-rounded img-responsive img-thumbnail">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);

                


                reader.readAsDataURL(input.files[i]);

                posts.images[i].set(i, input.files[i]);
            



        

    ;

    $('#gallery-photo-add').on('change', function() 

        imagesPreview(this, 'div.gallery');

    );
);
</script>

我刚刚得到这张图片

这是我的数据库中出现的内容

"_id" : ObjectId("57550dfd1fdfa6f701be755f"), "title" : "", "price" : 5555, "desc" : "", "images" : [ "city-1026227_960_720.jpg" ], " __v" : 0

【问题讨论】：

所以您没有收到任何 400 或 500 错误，说明无法在浏览器的控制台中找到图像，对吧？您设置为使用/发送静态文件对吗？你能从你的系统加载css文件吗？ post.image 有效吗？

没有错误，我的 css 和所有东西都连接好了，我只是得到了上面的那张照片。

【参考方案1】：

我刚刚做了一个简单的工作示例，它以数组形式输出图像，并保存到数据库中。我看不到你在为 res.render 做什么。我的意思是在我的示例中，字符串被保存到数据库中，它显示来自远程服务器的 img http://placehold.it/350x150

var express = require("express"),
    app = express(),
    mongoose = require("mongoose"),
    ejs = require("ejs");

mongoose.connect("mongodb://localhost/arrays");

app.set("view engine" , "ejs")

var postSchema =  mongoose.Schema(
    title  : String,
    images : [String]
)

var Post = mongoose.model("posts", postSchema);

Post.remove(,function(err, data)
    console.log("removed")
)
Post.create(title : "test", images : ["http://placehold.it/350x150", "two"], function(err, data)
    if(err) throw err;
    console.log(data);
)
app.get("/", function(req, res)
    Post.findOne("title" : "test", function(err, data)
        if(err) throw err;
        res.render("array", data: data)
    )

)

app.listen(3000, function()
    console.log("listening on 3000")
)

array.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arrays</title>
</head>
<body>
    <img src="<%= data.images %>" > 
</body>
</html>

编辑：您也可以尝试src="localhost:port/<%= post.images[0] %> 之类的方法，我想知道您的src="<%= post.image %>" 是否有效，因为如果无效，您的问题可能是您加载文件的方式而不是你使用数组的方式。