流星和filepicker-plus软件包

Question

使用流星的文件选择器和软件包选择文件选择器后，输出图像时遇到一些麻烦。 如何获取上载的图像URL或文件路径，因此可以将其传递到表单输入中并将其放入集合中。 放入收藏中不是我担心它无法获得欢呼声的途径。

全部包含在postSubmit模板中。

我有一个表格

<input type="filepicker" name="myName" />

和img输出在同一模板中

  <img src="{{filepickerIdToUrl myName}}">

和一个路由器文件包含

     Router.onBeforeAction(function(){
    loadFilePicker('magickey');
   //can leave out key if its in settings
   this.next();

},{only:['postSubmit']});

这是完整的postSubmit模板

<template name="postSubmit">
  <form>
      <label for="title">Title</label>
      <input name="title" id="title" type="text" value="" placeholder="Name your post"/>
      <button id="uploadImage" class="btn btn-info btn-sm"><i class="fa fa-upload"></i> Upload</button>
      <input type="submit" value="Submit"/>
  </form>
    <img id="imagePreview" class="img-responsive" src="{{filepickerIdToImageUrl imageId placehold_it='500x350' h=200 w=300}}"/>
                    <button id="removeImage" class="btn btn-warning btn-sm"><i class="fa fa-trash-o"></i> Remove</button>

这也是我的postSubmit活动

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

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

    };

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

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

Answer 1

多亏Nate和上面的google groups链接，我才能正常工作。

这是我解决的代码，现在它仅在表单上显示预览，您可以通过清除会话值将其删除，但是抓住该会话值并将其放入提交时将很容易。

再次感谢内特。

Template.postSubmit.created = function(){
    Session.setDefault("imageId", null);
    Session.setDefault("imageKey", null);
};



Template.postSubmit.events({



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

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

    };

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

      Router.go('postPage', {_id: result._id});
    });
  },
  'click #uploadImage':function(event, template){
        event.preventDefault();
        filepicker.pickAndStore(
            {
                mimetypes: ['image/gif','image/jpeg','image/png'],
                multiple: false
            },{
                access:"public"
            },
            function(InkBlobs){
                                // the upload is now complete to filepicker - but the form hasnt persisted the values to our collection yet
                Session.set("imageId", _.last(_.first(InkBlobs).url.split("/")));
                Session.set("imageKey", _.first(InkBlobs).key);
                                //  once the session changes are made, the form will now have the new values, including a preview of the image uploaded
            },
            function(FPError){
                log.error(FPError.toString());
            }
        );
    },

    'click #removeImage':function(event, template){
        event.preventDefault();
        Session.set("imageId", "remove");
        Session.set("imageKey", "remove");
    }
});

Template.postSubmit.helpers({
    'hideRemove':function(){
        return Session.equals("imageId", null) || Session.equals("imageId", "remove");
    },
    'imageId':function(){
        if(Session.equals("imageId", "remove"))
            return "";
        else
            return Session.get("imageId") || "";
    },
    'imageKey':function(){
        if(Session.equals("imageKey", "remove"))
            return "";
        else
            return Session.get("imageKey") || "";
    }
});