Question

我想提交一张图片..过去两天我一直在这里。看起来它非常简单，但我无法按照我想要的方式得到它。

在collectionFS的例子中（以及我能找到的每个其他例子），他们使用一个名为“change”的事件。 https://github.com/CollectionFS/Meteor-CollectionFS

每次用户想要上传图像（或任何文件）时，此事件都会更新并保存文件。他们不必按“提交”来保存它。

这是正确的做事方式吗？我正在尝试更改它，以便我可以将事件混合到我的“提交表单”事件中，但它似乎不起作用。

 'submit form': function(event, template) {
  console.log('this logs')

  FS.Utility.eachFile(event, function(file) {
    console.log('this doesnt log');
    Images.insert(file, function(err, fileObj) {
      if (err) {
        // handle error
      } else {
        // handle success depending what you need to do
        var userId = Meteor.userId();
        var imagesURL = {
          "profile.image": "/cfs/files/images/" + fileObj._id
        };
        Meteor.users.update(userId, {
          $set: imagesURL
        });
      }
    });
  });
}

但是，这似乎没有保存文件。它甚至不运行FS.Utility.eachFile部分。我已经尝试了各种各样的变化，但如果我列出它们，我担心它会发出非常长的帖子。我想也许有人可以指出我正确的方向？我已经尝试将文件保存到变量中然后插入它们......但我似乎无法使用提交表单运行FS.Utility。

非常感谢任何帮助！

Answer 1

对于那些后来挣扎于此的人来说，这是目前（1-5-2015）包装假设的问题。在cfs_base-packages.js中：

FS.Utility.eachFile = function(e, f) {
  var evt = (e.originalEvent || e);
  var files = evt.target.files;
  if (!files || files.length === 0) {
    files = evt.dataTransfer ? evt.dataTransfer.files : [];
  }
  for (var i = 0; i < files.length; i++) {
    f(files[i], i);
  }
};

它正在寻找你的事件结构如下：event.originalEvent.target.files，但是提交触发的事件是originalEvent.target: ""所以一个肮脏的解决办法就是做这样的事情：

Template.templateName.events({
      'submit .myForumClass': function(event, template) {
        event.preventDefault();
        event.originalEvent.target = {};
        event.originalEvent.target.files = event.currentTarget[0].files; 
       //0 is the position of the input field in the parent form
        FS.Utility.eachFile(event, function(file) {
         Images.insert(file, function (err, fileObj) {
          //stuff
          });
       });
     },
  });

Answer 2

希望以下示例有所帮助。

<template name="fileupload">
  <form class="form-horizontal" role="form">
    <input type="file" name="...">
    <button type="submit" value="Update" class="btn btn-primary">Upload File</button>
  </form>
</template>

Template.fileupload.events({

  'submit form': function (event, template) {
    console.log("Submit form called");

    event.preventDefault();
    var fileObj = template.find('input:file');

    FilesCollection.insert(fileObj.files[0], function (err, fileObj) {
    });
  }
});

Meteor：如何使用“提交表单”而非“更改”事件保存文件

2 个答案: