如何使用Meteor处理文件上传？

用Meteor处理文件上传的规范方法是什么？

当前似乎没有与HTTP服务器进行交互或执行与HTTP相关的任何操作的方法。

您唯一可以做的就是通过Meteor.methods公开的RPC方法与服务器对话，或者直接通过公开的mongoDB API与mongoDB对话。

我使用了http://filepicker.io。他们将上传文件，将其存储到您的S3中，并向您返回文件所在的URL。然后，我将URL放入数据库中。

1. 将filepicker脚本放入客户端文件夹。

   wget https://api.filepicker.io/v0/filepicker.js
   

2. 插入文件选择器输入标签

   <input type="filepicker" id="attachment">
   

3. 在启动时，将其初始化：

   Meteor.startup( function() {
       filepicker.setKey("YOUR FILEPICKER API KEY");
       filepicker.constructWidget(document.getElementById('attachment'));
   });
   

4. 附加事件处理程序

   Templates.template.events({
       'change #attachment': function(evt){
           console.log(evt.files);
       }
   });
   

对于图像，除了不将文件写入磁盘外，我使用与Dario相似的方法。我将数据直接作为模型中的字段存储在数据库中。这对我有用，因为我只需要支持支持HTML5 File API的浏览器。而且我只需要简单的图像支持。

Template.myForm.events({
  'submit form': function(e, template) {
    e.preventDefault();
    var file = template.find('input type=["file"]').files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      // Add it to your model
      model.update(id, { $set: { src: e.target.result }});

      // Update an image on the page with the data
      $(template.find('img')).attr('src', e.target.result);
    }
    reader.readAsDataURL(file);
  }
});

我刚刚提出了使用Meteor.methods和HTML5 File的API上传文件的实现。让我知道你的想法。

有一个新包：edgee：slingshot。它不会将文件上传到流星服务器，但是这样做更好，因为它允许流星服务器专注于服务流星应用程序的主要目标，而不是处理昂贵的文件传输。

而是将文件上传到云存储服务。当前，它支持AWS S3和Google Cloud Files，但将来也将支持Rackspace Cloud Files，也许还支持Cloudinary。

您的流星服务器仅充当协调者。

这也是一种非常通用且轻巧的包装。

有一个称为路由器的气氛程序包允许这样做。

实际上，现在处理文件上传的最佳方法是collectionFS

这是此时的最佳解决方案。它使用collectionFS。

meteor add cfs:standard-packages
meteor add cfs:filesystem

客户：

Template.yourTemplate.events({
    'change .your-upload-class': function(event, template) {
        FS.Utility.eachFile(event, function(file) {
            var yourFile = new FS.File(file);
            yourFile.creatorId = Meteor.userId(); // add custom data
            YourFileCollection.insert(yourFile, function (err, fileObj) {
                if (!err) {
                   // do callback stuff
                }
            });
        });
    }
});

服务器：

YourFileCollection = new FS.Collection("yourFileCollection", {
    stores: [new FS.Store.FileSystem("yourFileCollection", {path: "~/meteor_uploads"})]
});
YourFileCollection.allow({
    insert: function (userId, doc) {
        return !!userId;
    },
    update: function (userId, doc) {
        return doc.creatorId == userId
    },
    download: function (userId, doc) {
        return doc.creatorId == userId
    }
});

模板：

<template name="yourTemplate">
    <input class="your-upload-class" type="file">
</template>

如果您不需要很大的文件，或者可能只存储文件很短的时间，那么此简单的解决方案将非常有效。

在您的html中...

<input id="files" type="file" />

在您的模板事件图中...

Template.template.events({
  'submit': function(event, template){
    event.preventDefault();
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      _.each(template.find('#files').files, function(file) {
        if(file.size > 1){
          var reader = new FileReader();
          reader.onload = function(e) {
            Collection.insert({
              name: file.name,
              type: file.type,
              dataUrl: reader.result
            });
          }
          reader.readAsDataURL(file);
        }
      });
    }
  }
});

订阅收藏集并在模板中呈现链接...

<a href="{{dataUrl}}" target="_blank">{{name}}</a>

对于大型文件或文件密集型应用程序，这可能不是最可靠或最优雅的解决方案，但如果要实现文件的简单上载和下载/呈现，它对于所有类型的文件格式都非常适用。

您可以尝试直接上传到Amazon S3，并使用js上传器和一些技巧。 http://aws.amazon.com/articles/1434

你可以在流星路线图上看到上看到功能“文件上载模式”计划为“ 1.0之后”。因此，我们必须等待正式的方式。

目前，最好的方法之一是使用“ collectionFS”（在撰写本文时为0.3.x dev预览）。

或按此处建议使用inkfilepicker（例如filepicker.io）。它很容易使用，尽管这显然需要用户侧与Internet的连接。

如果只是玩转，您也可以利用html5功能。喜欢的东西说。

这是另一个解决方案：

https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/

这是使用Blueimp的上传解决方案，该解决方案支持分块上传，进度条等。

要完成与最受欢迎的答案相同的操作而又不花费filepicker.io，请遵循此软件包的说明：https : //github.com/Lepozepo/S3

然后，使用以下类似的代码获取链接。最后，将secureLink返回的URL插入数据库。

Template.YourTemplate.events({
  "click button.upload": function() {
    var files = $("input.file_bag")[0].files;
    S3.upload(files, "/subfolder", function(e,r) {
      console.log(r);
      Session.set('secureLink', r.secure_url);
    })
  }
});

Template.YourTemplate.helpers({
  "files": function() {
    return S3.collection.find();
  },

  "secureLink": function() {
    return Session.get('secureLink');
  }
});