Question

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

Answer 1

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

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

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

插入filepicker输入标记

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

在启动时，初始化它：

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

附加事件处理程序

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

Answer 2

对于图像，我使用类似于Dario's的方法，除非我不将文件写入磁盘。我将数据作为模型中的字段直接存储在数据库中。这对我有用，因为我只需要支持支持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);
  }
});

Answer 3

我刚刚使用Meteor.methods和HTML5 File的API提出an implementation of file uploads。让我知道你的想法。

Answer 4

目前似乎没有办法与HTTP服务器交互或执行与HTTP相关的任何事情。

您可以做的唯一事情是通过Meteor.methods公开的RPC方法与服务器通信，或者直接通过暴露的mongoDB API与mongoDB交谈。

Answer 5

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

相反，它将文件上传到云存储服务。目前它支持AWS S3和Google Cloud Files，但它也将支持Rackspace Cloud Files以及未来的Cloudinary。

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

Direct VS Indirect uploads

它也是一种用途广泛且重量轻的包装。

Answer 6

有一个名为router的气氛包，允许这样做。

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

Answer 7

这是目前最好的解决方案。它使用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>

Answer 8

您可以尝试直接上传到亚马逊S3，使用js上传器和其他东西做一些技巧。 http://aws.amazon.com/articles/1434

Answer 9

如果您不需要非常大的文件或者只是短时间存储文件，那么这个简单的解决方案就能很好地工作。

在你的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>

虽然这可能不是大文件或文件密集型应用程序最强大或最优雅的解决方案，但如果您想实现文件的简单上传和下载/呈现，它对所有类型的文件格式都能很好地工作。

Answer 10

您可以在meteor roadmap上看到“文件上传模式”功能被安排为“1.0之后”。因此，我们必须等待以正式方式看待。

目前，最好的方法之一是使用"collectionFS"（在写作时为0.3.x dev预览版）。

或inkfilepicker (ex. filepicker.io)，如此处所示。它很容易使用，虽然这显然需要用户端的互联网连接。

如果它只是为了玩，你也可以利用html5功能。类似于that。

Answer 11

要在没有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');
  }
});

Answer 12

这是另一个解决方案：

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

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

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

12 个答案: