Question

在使用来自meteor的file picker plus package进行文件选择器选择后输出图像时遇到一些麻烦。如何抓取上传的图片网址或文件路径，以便将其传递到表单输入并将其放入集合中。加入收藏品不是我担心它会让我遇到欢呼声的问题。

全部包含在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群组链接，我让它发挥了作用。

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

再次感谢Nate。

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

Meteor和filepicker-plus包

1 个答案: