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