77

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

4

12 回答 12

44

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

  1. 将文件选择器脚本放入您的客户端文件夹。

    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);
    }
});
于 2012-09-18T20:47:24.320 回答
26

对于图像，我使用类似于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);
  }
});
于 2013-01-04T20:53:01.607 回答
19

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

于 2012-10-20T05:32:49.670 回答
17

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

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

于 2012-04-11T06:24:18.820 回答
11

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

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

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

直接 VS 间接上传

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

于 2015-01-12T23:35:18.677 回答
7

有一个名为router的环境包，它允许这样做。

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

于 2013-03-24T15:57:57.977 回答
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>
于 2014-09-09T06:12:46.023 回答
4

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

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

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

于 2014-09-06T22:27:51.903 回答
3

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

于 2012-04-11T12:57:47.037 回答
2

您可以在流星路线图上看到，“文件上传模式”功能计划用于“1.0 之后”。所以我们还得等看官方的办法。

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

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

如果只是玩玩，您也可以利用 html5 功能。类似的东西。

于 2013-09-22T02:21:21.367 回答
2

要在不花费 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');
  }
});
于 2014-09-18T01:53:34.280 回答
2

这是另一个解决方案：

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

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

于 2014-11-24T21:42:39.747 回答