[英]In Meteor, how can I link a collectionFS image to the right document?
我實際上找到了這個答案,但我真的沒明白。
所以,我有這個mongo集合,我想將圖像從collectionFS鏈接到正確的父文檔。 我該怎么做? 這是代碼:
集合的聲明
AccommodationList = new Mongo.Collection('accommodation');
ImagesAcc = new FS.Collection("imagesacc", {
stores: [new FS.Store.FileSystem("imagesacc", {path: "~/uploads"})]
});
if(Meteor.isClient){
Template.accommodations.helpers({
'accommodation': function(){
return AccommodationList.find();
}
});
Template.photopageaccommodation.helpers({
imagesacc: ImagesAcc.find()
});
Template.photopageaccommodation.events({
'dblclick .uploadedImage': function(e){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
ImagesAcc.remove({_id:this._id});
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
}
});
Template.photopageaccommodation.events({
'change #accfile': function(event, template) {
event.preventDefault();
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
}
});
}
提交表格
Template.accommodations.events({
'submit #accommodation': function(){
event.preventDefault();
var accommodationNomVar = event.target.nom.value;
var accommodationDescriptionVar = event.target.description.value;
var accommodationTarifVar = event.target.tarif.value;
var accommodationNbrEtoilesVar = event.target.nbretoiles.value;
var accommodationTypeExcluVar = event.target.typeexclu.value;
var accommodationTypeVar = event.target.type.value;
var accommodationAddresseVar = event.target.addresse.value;
var accommodationTelephoneVar = event.target.telephone.value;
var accommodationEmailVar = event.target.email.value;
AccommodationList.insert({
nom: accommodationNomVar,
description: accommodationDescriptionVar,
tarif: accommodationTarifVar,
nbretoiles: accommodationNbrEtoilesVar,
typeexclu: accommodationTypeExcluVar,
type: accommodationTypeVar,
addresse: accommodationAddresseVar,
email: accommodationEmailVar,
telephone: accommodationTelephoneVar,
});
event.target.reset();
},
'click .delete': function(){
var confirm = window.confirm("Etes-vous sur ??");
if(confirm){
AccommodationList.remove(this._id);
Bert.alert('Vous venez de supprimer', 'warning', 'growl-top-right');
}
},
});
這是模板
<template name="accommodations">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form id="accommodation">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Nom</label>
<input type="text" class="form-control" placeholder="Nom" name="nom">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Type</label>
<input type="text" class="form-control" placeholder="Type" name="type">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control" placeholder="Description" name="description">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Nombre d'etoiles</label>
<input type="number" class="form-control" placeholder="Nombre d'etoiles" name="nbretoiles">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Type d'exclusivite</label>
<input type="text" class="form-control" placeholder="Type d'exclusivite" name="typeexclu">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Tarif</label>
<input type="number" class="form-control" placeholder="Tarif" name="tarif">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" placeholder="Telephone" name="telephone">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Addresse</label>
<input type="text" class="form-control" placeholder="Addresse" name="addresse">
</div>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-info btn-fill pull-right">Ajouter</button>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
<br>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Table des accommodations</h4>
<p class="category">Here is a subtitle for this table</p>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<th>ID</th>
<th>Nom</th>
<th>Type</th>
<th>Description</th>
<th>Etoiles</th>
<th>Tarif</th>
<th>Telephone</th>
<th>Email</th>
<th>Adresse</th>
<th></th>
</thead>
<tbody>
{{#each accommodation}}
<tr>
<td>{{id}}</td>
<td>{{> editableText collection="accommodation" field="nom" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="type" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="description" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="nbretoiles" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="tarif" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="telephone" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="email" eventType="dblclick"}}</td>
<td>{{> editableText collection="accommodation" field="addresse" eventType="dblclick"}}</td>
<td><a class="delete"><a class="btn btn-danger"><i class="fa fa-trash"></i></a></a>
<a href="photopageaccommodation"><a class="btn btn-gray"><i class="fa fa-camera"></i></a></a></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
這是實際從中加載並顯示圖像的模板
<template name="photopageaccommodation">
<style>
.section-title h2 {
display: inline-block;
font-size: 30px;
font-weight: 300;
line-height: 30px;
margin-bottom: 40px;
padding-bottom: 10px;
position: relative;
text-transform: uppercase;
}
.section-title h2:before {
position: absolute;
background: #575757;
height: 2px;
width: 45px;
content: "";
bottom: 0;
}
.portfolio-menu button.mixitup-control-active {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid #4bcaff;
color: #4bcaff;
padding: 10px 15px;
font-weight: 700;
transition: .4s;
text-transform: uppercase;
}
.portfolio-menu button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 2px solid transparent;
color: #515f67;
padding: 10px 15px;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.single-portfolio a {
display: block;
line-height: 0;
position: relative;
}
.single-portfolio a::before {
background: #000 none repeat scroll 0 0;
content: "";
height: 100%;
opacity: 0;
position: absolute;
top: 0;
transform: scale(0.5);
transition: all 0.3s ease 0s;
width: 100%;
}
.single-portfolio:hover a::before {
opacity: .5;
transform: scale(1);
}
.single-portfolio a::after {
color: #fff;
content: "+";
font-size: 60px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: scale(0);
transition: all 0.3s ease 0s;
}
.single-portfolio:hover a::after {
transform: scale(1);
}
</style>
<script>
$(document).ready(function() {
// This will create a single gallery from all elements that have class "gallery-item"
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
}
});
// MixItUp 2
$('#container').mixItUp();
});
</script>
<div class="wrapper">
{{>sidebar}}
<div class="main-panel">
{{>navbar}}
<div class="content">
<div class="form-group">
<label>Photos</label>
<input type="file" multiple id="accfile" class="form-control">
</div>
<div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js"></script>
<div class="container">
<div id="container" class="row">
{{#each imagesacc}}
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<div class="uploadedImage">
<!--<a class="gallery-item" href="{{this.url}}">-->
<img class="img-responsive" src="{{this.url}}" alt="One" />
<!--</a>-->
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{>footer}}
</div>
</div>
問題是這可以正常工作,但問題是我添加的圖像未鏈接到特定文檔,例如,當我查看住宿時,我只想查看該酒店的圖像!
感謝您的幫助!
插入文件的_id
在insert函數的回調中返回。 您現在擁有的位置:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
您需要在回調中包含一些實際代碼,以將圖像的_id
保存到另一個集合中作為參考。
例如,如果您上傳的與單獨住宿的數據上下文中運行(這樣, this
指向當前的AccommodationList
對象)時,你可以直接更新如下:
FS.Utility.eachFile(event, function(file) {
ImagesAcc.insert(file, function (err, fileObj) {
if (!err) {
console.log('The _id of the inserted Image is: '+fileObj._id);
console.log('The _id of the current AccommodationList object is: '+this._id);
AccommodationList.update(this._id,{ $set: { imageId: fileObj._id }});
}
});
});
console.log()
語句僅在此處供您驗證其工作方式。 此模式假設每個住宿只有一張圖片。 要查找給定父父AccommodationList
對象的_id
aclistId的圖像,請執行以下操作:
const imageId = AccommodationList.findOne(aclistId).imageId;
const image = ImagesAcc.findOne(imageId);
如果您有一組圖像,則可以使用$push
代替:
AccommodationList.update(this._id,{ $push: { imageIds: fileObj._id }});
然后,您必須找到所有與$in:
匹配的圖像:
const imageIds = AccommodationList.findOne(aclistId).imageIds;
const images = ImagesAcc.findOne({ _id: { $in: imageIds }});
機會良多!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.