Javascript 如何使用 Meteor 处理文件上传？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10099202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would one handle a file upload with Meteor?
提问by David
What would be the canonical way to handle a file upload with Meteor?
使用 Meteor 处理文件上传的规范方法是什么？
采纳答案by Raynos
There currently doesn't seem to be a way to interact with the HTTP server or do anything related to HTTP.
目前似乎没有办法与 HTTP 服务器交互或执行与 HTTP 相关的任何事情。
The only things you can do is talk to server over the RPC methods exposed by Meteor.methods or talk to mongoDB directly over the mongoDB API exposed.
您唯一能做的就是通过 Meteor.methods 公开的 RPC 方法与服务器对话，或者直接通过公开的 mongoDB API 与 mongoDB 对话。
回答by jlg_foil
I used http://filepicker.io. They'll upload the file, store it into your S3, and return you a URL where the file is. Then I just plop the url into a DB.
我使用了http://filepicker.io。他们将上传文件，将其存储到您的 S3 中，并向您返回文件所在的 URL。然后我只是将 url 放入数据库中。
Wget the filepicker script into your client folder.
wget https://api.filepicker.io/v0/filepicker.jsInsert a filepicker input tag
<input type="filepicker" id="attachment">In the startup, initialize it:
Meteor.startup( function() { filepicker.setKey("YOUR FILEPICKER API KEY"); filepicker.constructWidget(document.getElementById('attachment')); });Attach a event handler
Templates.template.events({ 'change #attachment': function(evt){ console.log(evt.files); } });
将文件选择器脚本放入您的客户端文件夹。
wget https://api.filepicker.io/v0/filepicker.js插入文件选择器输入标签
<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); } });
回答by Harry Love
For images, I use a method similar to Dario'sexcept I don't write the file to disk. I store the data directly in the database as a field on the model. This works for me because I only need to support browsers that support the HTML5 File API. And I only need simple image support.
对于图像，我使用类似于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);
}
});
回答by Darío
I've just come up with an implementation of file uploadsusing Meteor.methods and HTML5 File's API. Let me know what you think.
我刚刚提出了一个使用 Meteor.methods 和 HTML5 File's API的文件上传实现。让我知道你的想法。
回答by d_inevitable
There is a new package: edgee:slingshot. It does not upload the files to your meteor server, but it is better that way as it allows the meteor server to focus on its primary objective of serving the meteor app instead of handling costly file transfers.
有一个新包：edgee:slingshot。它不会将文件上传到您的流星服务器，但这种方式更好，因为它允许流星服务器专注于为流星应用程序提供服务的主要目标，而不是处理昂贵的文件传输。
Instead it uploads files to cloud storage services. Currently it supports AWS S3 and Google Cloud Files, but it will also support Rackspace Cloud Files and perhaps Cloudinary in the future.
相反，它将文件上传到云存储服务。目前它支持 AWS S3 和 Google Cloud Files，但它也将支持 Rackspace Cloud Files，未来可能还会支持 Cloudinary。
Your meteor server merely acts as as a coordinator.
您的流星服务器仅充当协调器。
It is also a very versatile and light-weight package.
它也是一种用途广泛且重量轻的包装。
回答by Micha Roon
there is an atmosphere package called routerwhich allows just that.
有一个叫做router的大气包可以做到这一点。
actually, the best way to handle file uploads is now collectionFS
实际上，处理文件上传的最佳方式现在是collectionFS
回答by Raz
Here is the best solution for this time. It uses collectionFS.
这是这次的最佳解决方案。它使用collectionFS。
meteor add cfs:standard-packages
meteor add cfs:filesystem
Client:
客户：
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
}
});
});
}
});
Server:
服务器：
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:
模板：
<template name="yourTemplate">
<input class="your-upload-class" type="file">
</template>
回答by Steeve Cannon
If you do not require significantly large files or maybe only storing the files for a short period of time then this simple solution works very well.
如果您不需要非常大的文件，或者可能只将文件存储很短的时间，那么这个简单的解决方案非常有效。
In your html...
在你的 html...
<input id="files" type="file" />
In your template event map...
在您的模板事件地图中...
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);
}
});
}
}
});
Subscribe to the Collection and in a template render a link...
订阅集合并在模板中呈现链接...
<a href="{{dataUrl}}" target="_blank">{{name}}</a>
While this might not be the most robust or elegant solution for large files or a file intensive application it works very well for all kind of file formats if you want to implement simple upload and download/rendering of the files.
虽然这对于大文件或文件密集型应用程序来说可能不是最健壮或优雅的解决方案，但如果您想实现文件的简单上传和下载/渲染，它对于所有类型的文件格式都非常有效。
回答by Luan
You could try uploading directly to amazon S3, doing some tricks with js uploaders and stuff. http://aws.amazon.com/articles/1434
你可以尝试直接上传到亚马逊 S3，用 js 上传器和东西做一些技巧。 http://aws.amazon.com/articles/1434
回答by Sean L
To accomplish the same action as the most upvoted answer without the cost of filepicker.io, follow the instructions for this package: https://github.com/Lepozepo/S3
要在不使用 filepicker.io 的情况下完成与最高投票答案相同的操作，请按照此包的说明进行操作：https: //github.com/Lepozepo/S3
Then to obtain the link, use code similar to below. Finally, plug the url returned by secureLink into the DB.
然后要获取链接，请使用类似于下面的代码。最后，将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');
}
});
