javascript - 尝试使用弹弓在 meteor 中使用模板助手在模板中预览图像

Question

我遇到的问题是应该从模板助手渲染的 {{img}} 似乎不起作用，我正在使用meteor-slinghsot pacakage。

我有以下模板助手

Template.postSubmit.helpers({
    url: function () {
      //if we are uploading an image, pass true to download the image into cache
      //this will preload the image before using the remote image url.
      var hello = this.uploader.url(true);
      console.log(hello);
      return this.uploader.url(true);
    }
});

我有以下模板事件

   Template.postSubmit.events({
  'submit form': function(e) {
    e.preventDefault();

    $('#textArea.editable').editable({
  success: function(response, newValue) {

    alert("test");

}
});

    var post = {
      title: $(e.target).find('[name=title]').val(),
      postContent: $(e.target).find('[name="postContent"]').val(),
      image: imageLoad
    };

    Meteor.call('postInsert', post, function(error, result) {
      // display the error to the user and abort
      if (error)
        return alert(error.reason);

      // show this result but route anyway
      if (result.postExists)
        alert('This link has already been posted');

        Router.go('postPage', {_id: result._id});




      });
    },
    'change #fileUpload':function(event, template){
      event.preventDefault();

      var uploader = new Slingshot.Upload("myFileUploads");


      var error = uploader.validate(document.getElementById('fileUpload').files[0]);




if (error) {
  console.error(error);
}

      var file = event.currentTarget.files[0];
      console.log(file.name);

      uploader.send(document.getElementById('fileUpload').files[0], function (error, downloadUrl) {

        console.log(error);
        console.log(downloadUrl);

      imageLoad = downloadUrl;


      Meteor.users.update(Meteor.userId(), {$push: {"profile.files": downloadUrl}});



      });







    }

});

我有以下 html 模板

<template name="postSubmit">
  {{> dashboard}}
  <p id="textArea" class="editable" data-type="textarea" data-placeholder="Enter text" data-emptytext="Click to enter text" data-rows="4">{{textAreaContent}}</p>
  <img src={{url}}/>

  <form>
    <!-- <div>
      <label for="url">URL</label>
      <div>
        <input name="url" id="url" type="text" value="" placeholder="Your URL" class="form-control"/>
      </div>
    </div> -->
    <div class="postTitle">
      <label class="titleLabel">Press Release Title</label>
      <div class="input">
        <input name="title" id="title" type="text" value="" placeholder="Title Here."/>
      </div>
    </div>
    <div>
      <div class="textarea">
        <label class="contentLabel">Press Release content.</label>

        <!-- <input name="postContent" id="postContent" type="text" value="" placeholder="Enwave has released a..."/> -->
        <textarea name="postContent" id="postContent" type="text"></textarea>
      </div>
    </div>
    <input id="fileUpload" type="file"/>

    <input type="submit" value="Submit"/>
  </form>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}}%;">
      <span class="sr-only">{{progress}}% Complete</span>
    </div>
  </div>
</template>

Answer 1

我不确定您希望通过代码实现什么目标，但这就是您的模板助手无法工作的原因:

var hello = this.uploader.url(true);

this.uploader 未定义。它必须是一个发送文件的 Slingshot.Upload 对象。