blocks|key|598869|text|目前似乎没有一种方法可以与HTTP服务器交互或做任何与HTTP相关的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|598870|您可以做的惟一事情就是通过Meteor.methods公开的RPC方法与服务器通信，或者通过公开的RPC直接与mongoDB通信。|598871|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

There currently doesn't seem to be a way to interact with the HTTP server or do anything related to 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.

blocks|key|383093|text|对于图像，我使用类似于Dario's的方法，只是我不将文件写入磁盘。我将数据作为模型上的一个字段直接存储在数据库中。这对我来说很有效，因为我只需要支持支持HTML5+File+API的浏览器。我只需要简单的图像支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|383094|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);
++}
});|code-block|syntax|javascript|383095|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12985583/166101|1|http://www.w3.org/TR/FileAPI/^0|B|7|0|25|E|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

For images, I use a method similar to <a href="https://stackoverflow.com/a/12985583/166101">Dario's</a> except 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 <a href="http://www.w3.org/TR/FileAPI/" rel="nofollow noreferrer">HTML5 File API</a>. And I only need simple image support.

<pre><code>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);
 }
});
</code></pre>

blocks|key|598961|text|我刚刚想出了使用Meteor.methods和HTML5文件的应用程序接口的an+implementation+of+file+uploads。让我知道你的想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|598962|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/3922137^0|12|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I've just come up with <a href="https://gist.github.com/3922137" rel="nofollow noreferrer">an implementation of file uploads</a> using Meteor.methods and HTML5 File's API. Let me know what you think.

blocks|key|383547|text|有了一个新的包：edgee:slingshot。它不会将文件上传到您的meteor服务器，但这样更好，因为它允许meteor服务器专注于其主要目标，即为meteor应用程序提供服务，而不是处理昂贵的文件传输。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|383548|相反，它会将文件上传到云存储服务。目前它支持亚马逊网络服务S3和谷歌云文件，但它也将支持Rackspace云文件，也许将来还会支持Cloudinary。|383549|您的meteor服务器仅充当协调器。|383550|​|383551|📷|atomic|383552|383553|它也是一个非常通用和轻量级的包。|383554|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/CulturalMe/meteor-slingshot/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/292d1e5c8ddb1de80b7ef00a681fd2df.png|imageAlt^0|8|F|0|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|M|3|I|5|6|7|1E|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1F|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|Y|T|Z|C|$10|11|12|-4]]]]

There is a new package: <a href="https://github.com/CulturalMe/meteor-slingshot/" rel="noreferrer">edgee:slingshot</a>. 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.

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.

Your meteor server merely acts as as a coordinator.

<img src="https://i.stack.imgur.com/N51Ty.png" alt="Direct VS Indirect uploads">

It is also a very versatile and light-weight package.

blocks|key|599053|text|有一个名为router的atmosphere包就可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|599054|实际上，现在处理文件上传的最好方法是collectionFS|599055|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tmeasday/meteor-router|1|https://github.com/raix/Meteor-CollectionFS^0|5|6|0|0|I|C|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

there is an atmosphere package called <a href="https://github.com/tmeasday/meteor-router">router</a> which allows just that. 

actually, the best way to handle file uploads is now <a href="https://github.com/raix/Meteor-CollectionFS">collectionFS</a>

blocks|key|599215|text|这是目前最好的解决方案。它使用collectionFS。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|599216|meteor+add+cfs:standard-packages
meteor+add+cfs:filesystem|code-block|syntax|javascript|599217|客户端：|599218|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
++++++++++++++++}
++++++++++++});
++++++++});
++++}
});|599219|服务器：|599220|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
++++}
});|599221|模板：|599222|<template+name="yourTemplate">
++++<input+class="your-upload-class"+type="file">
</template>|599223|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/CollectionFS/Meteor-CollectionFS^0|F|C|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|C|$]]|$1|S|3|T|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

Here is the best solution for this time. It uses <a href="https://github.com/CollectionFS/Meteor-CollectionFS">collectionFS</a>.

<pre><code>meteor add cfs:standard-packages
meteor add cfs:filesystem
</code></pre>

Client:

<pre><code>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
 }
 });
 });
 }
});
</code></pre>

Server:

<pre><code>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
 }
});
</code></pre>

Template:

<pre><code>&lt;template name="yourTemplate"&gt;
 &lt;input class="your-upload-class" type="file"&gt;
&lt;/template&gt;
</code></pre>

blocks|key|383235|text|如果您不需要很大的文件，或者可能只存储短时间的文件，那么这个简单的解决方案非常有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|383236|在你的html中..。|383237|<input+id="files"+type="file"+/>|code-block|syntax|javascript|383238|在您的模板事件映射中...|383239|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);
++++++++}
++++++});
++++}
++}
});|383240|订阅集合并在模板中呈现链接...|383241|<a+href="{{dataUrl}}"+target="_blank">{{name}}</a>|383242|虽然对于大型文件或文件密集型应用程序来说，这可能不是最健壮或最优雅的解决方案，但如果您想实现简单的文件上传和下载/渲染，那么它对于所有类型的文件格式都非常有效。|383243|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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...

<pre><code>&lt;input id="files" type="file" /&gt;
</code></pre>

In your template event map...

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

Subscribe to the Collection and in a template render a link...

<pre><code>&lt;a href="{{dataUrl}}" target="_blank"&gt;{{name}}&lt;/a&gt;
</code></pre>

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.

blocks|key|383013|text|你可以尝试直接上传到亚马逊S3，用js上传工具和其他工具做一些小把戏。http://aws.amazon.com/articles/1434|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|383014|entityMap|0|LINK|mutability|MUTABLE|url|http://aws.amazon.com/articles/1434^0|Z|Z|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You could try uploading directly to amazon S3, doing some tricks with js uploaders and stuff.
<a href="http://aws.amazon.com/articles/1434" rel="nofollow">http://aws.amazon.com/articles/1434</a>

blocks|key|383176|text|您可以在meteor+roadmap上看到，“文件上传模式”功能计划在“1.0之后”。因此，我们必须等待官方的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|383177|就目前而言，最好的方法之一是使用"collectionFS"+(它在撰写本文时是0.3.xdev预览版)。|383178|或者这里建议的inkfilepicker+(ex.+filepicker.io)。它很容易使用，尽管这显然需要从用户端连接到Internet。|383179|如果只是玩玩，你也可以利用html5的特性。就像that一样。|383180|entityMap|0|LINK|mutability|MUTABLE|url|https://trello.com/b/hjBDflxp/meteor-roadmap|1|https://github.com/raix/Meteor-CollectionFS|2|https://www.inkfilepicker.com/|3|http://georgeinenglish.com/upload-files-meteor-js/^0|4|E|0|0|G|E|1|0|7|X|2|0|O|4|3|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|J|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|M|N|O|C|$P|W]]]]

You can see on the <a href="https://trello.com/b/hjBDflxp/meteor-roadmap" rel="nofollow">meteor roadmap</a> that the feature "File upload pattern" is scheduled for "After 1.0". So we have to wait to see an official way.

For now, one of the best ways is to use <a href="https://github.com/raix/Meteor-CollectionFS" rel="nofollow">"collectionFS"</a> (which is 0.3.x dev preview at the time of writting).

Or <a href="https://www.inkfilepicker.com/" rel="nofollow">inkfilepicker (ex. filepicker.io)</a> as suggested here. It is easy enough to use, although this obviously requires and Internet connection from the user side.

If it just to play around, you could as well take advantage of the html5 feature. Something like <a href="http://georgeinenglish.com/upload-files-meteor-js/" rel="nofollow">that</a>.

blocks|key|599271|text|要完成与最高支持率答案相同的操作而不花费filepicker.io成本，请遵循此程序包的说明：https://github.com/Lepozepo/S3|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|599272|然后使用类似于下面的代码来获取链接。最后，将secureLink返回的url插入到DB中。|599273|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);
++++})
++}
});|code-block|syntax|javascript|599274|Template.YourTemplate.helpers({
++"files":+function()+{
++++return+S3.collection.find();
++},

++"secureLink":+function()+{
++++return+Session.get('secureLink');
++}
});|599275|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Lepozepo/S3^0|1B|U|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

To accomplish the same action as the most upvoted answer without the cost of filepicker.io, follow the instructions for this package: <a href="https://github.com/Lepozepo/S3" rel="nofollow">https://github.com/Lepozepo/S3</a>

Then to obtain the link, use code similar to below. Finally, plug the url returned by secureLink into the DB. 

<pre><code>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);
 })
 }
});
</code></pre>



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

 "secureLink": function() {
 return Session.get('secureLink');
 }
});
</code></pre>

blocks|key|599308|text|这是另一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599309|https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/|offset|length|599310|它使用的是Blueimp的上传解决方案，支持分块上传、进度条等。|599311|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

here is yet another solution:

<a href="https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/" rel="nofollow">https://doctorllama.wordpress.com/2014/11/06/meteor-upload-package-with-jquery-file-upload/</a>

This one is using Blueimp's upload solution that supports chunked uploads, progress bars and more.

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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