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

【问题标题】：Meteor: How to save files with 'submit form' instead of 'change' eventsMeteor：如何使用“提交表单”而不是“更改”事件保存文件
【发布时间】：2015-08-23 13:37:51
【问题描述】：

我正在尝试提交图像.. 过去两天我一直在处理这个问题。看起来它非常简单，但我无法按照我想要的方式得到它。

在 collectionFS 的示例（以及我能找到的所有其他示例）中，它们使用了一个称为“更改”的事件。 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 使用提交表单运行。

任何帮助将不胜感激！

【问题讨论】：

标签： meteor meteor-helper collectionfs

【解决方案1】：

对于那些后来遇到这个问题的人来说，这是包目前（2015 年 1 月 5 日）所做的假设的问题。在 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
          });
       });
     },
  });

【讨论】：

【解决方案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) {
    });
  }
});

【讨论】：