【问题标题】: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 和所有东西都连接好了,我只是得到了上面的那张照片。

标签: mongodb mongoose ejs


【解决方案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 %>" alt=""> 
</body>
</html>

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-07
    • 2015-08-27
    • 2022-10-14
    • 2016-11-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多