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

这是实际加载和显示图像的模板

<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 对象的 _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 }});

好机会！