在Meteor中，如何将collectionFS图像链接到正确的文档？

Question

我其实发现了这个answer但我真的不明白。

所以，我有这个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> 

和这里的TEM板在图像实际上是从加载和显示

<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> 

的事情是，这是工作，但问题是，我添加未链接到一个特定的文件图像，我想例如，当看住宿时，我只想看到那家酒店的图片！

感谢您的帮助！

Answer 1

插入文件的_id从插入函数返回回调中。当你现在有：

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对象的_idaclistId一个形象：

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 }}); 

Bonne的机会！