希望访问mongoose字符串数组

时间:2016-06-06 04:30:16

标签: mongodb mongoose ejs

我可以访问我的架构中的所有元素,除了那些对我来说很棘手的数组。当我上传一张照片并且我使用开发者控制台查看图像的链接时,它会显示“/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>

我刚拿到这张图片

enter image description here

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

{“_ id”:ObjectId(“57550dfd1fdfa6f701be755f”),“title”:“”,“price”:5555,“desc”:“”,“images”:[“city-1026227_960_720.jpg”],“ __v“:0}

1 个答案:

答案 0 :(得分:0)

我刚刚制作了一个简单的工作示例,它输出了一个保存到数据库的数组中的图像。我不知道你在为res.render做什么。我的意思是在我的示例中,字符串已保存到数据库中,并在here

处显示来自远程服务器的img
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 %>" alt=""> 
</body>
</html>

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