我可以访问我的架构中的所有元素,除了那些对我来说很棘手的数组。当我上传一张照片并且我使用开发者控制台查看图像的链接时,它会显示“/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}
答案 0 :(得分:0)
我刚刚制作了一个简单的工作示例,它输出了一个保存到数据库的数组中的图像。我不知道你在为res.render做什么。我的意思是在我的示例中,字符串已保存到数据库中,并在here
处显示来自远程服务器的imgvar 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 %>"
是否有效,因为如果不是,您的问题可能就是您的加载方式文件而不是你使用数组的方式。