如何处理与meteorfile upload?

用Meteor处理file upload的规范方法是什么?

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

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

我用http://filepicker.io 。 他们会上传文件,将其存储到您的S3中,然后返回一个文件所在的URL。 然后,我只是把这个url放到一个数据库中。

  1. Wget filepicker脚本到您的客户端文件夹。

    wget https://api.filepicker.io/v0/filepicker.js 
  2. 插入一个filepickerinput标签

     <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来实现file upload 。 让我知道你在想什么,达里奥

有一个新的包: edgee:弹弓 。 它不会将file upload到您的meteor服务器,但它更好,因为它允许meteor服务器专注于服务meteor应用程序的主要目标,而不是处理昂贵的文件传输。

而是将file upload到云存储服务。 目前它支持AWS S3和Google Cloud Files,但是它将来也会支持Rackspace Cloud Files和Cloudinary。

你的meteor服务器只是作为一个协调者。

直接VS间接上传

这也是一个非常灵活和轻量级的包装。

有一个称为路由器的气氛包,允许这一点。

实际上,处理file upload的最好方法是现在的collectionFS

这次是最好的解决scheme。 它使用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> 

你可以尝试直接上传到亚马逊S3,做一些与js上传和东西的技巧。 http://aws.amazon.com/articles/1434

如果你不需要很大的文件,或者只需要很短的时间存储文件,那么这个简单的解决scheme工作得很好。

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

虽然这可能不是大型文件或文件密集型应用程序最健壮或最优秀的解决scheme,但如果您想实现文件的简单上载和下载/渲染,它对所有types的文件格式都非常有效。

您可以在meteor路线图上看到“file upload模式”function预定为“1.0之后”。 所以我们必须等待看到官方的方式。

目前,最好的方法之一是使用“collectionFS” (这是写作时的0.3.x开发预览版)。

或者像这里build议的inkfilepicker(例如filepicker.io) 。 这很容易使用,虽然这显然需要和用户端的互联网连接。

如果只是玩耍,你也可以利用html5function。 就是这样

这是又一个解决scheme:

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

这一个是使用Blueimp的上传解决scheme,支持分块上传,进度条等。

要完成与没有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'); } });