注意: 本教程使用的是2014年12月15日的Meteor 1.1.3 和 cfs:standard-package 0.0.2。由於此功能正在積極開發中，您閱讀此文時可能已有所變化。如果你有任何疑問，請隨時聯絡我。:)
上周，我的一個朋友問我如何在Meteor項目中處理檔案上傳。我建議他使用Collection FS，並按照他們存儲庫的README.md指南。檔案上傳功能在本地主機上工作正常，但一旦部署到免費的Meteor測試服務器，就會失敗。事實上，服務器會不斷刷新，甚至無法加載頁面。
這個問題產生的原因是 FS.filesystem 將圖像上傳到公共資料夾目錄。由於安全考慮，除非經過適當配置，否則服務器不允許這樣做。一個解決方法是使用 GridFS 作為儲存適配器，將圖像插入到MongoDB中。
首先，不要使用cfs:filesystem，而要為您的套件使用cfs:gridfs。
meteor add cfs:standard-packages
meteor add cfs:gridfs
接下來，當聲明您的集合時，從使用 FS.Collection 切換到 FS.Store.GridFS。
var imageStore = new FS.Store.GridFS("images")
Images = new FS.Collection("images", {
stores: [imageStore],
})
然後，根據你的需求設定'deny'和'allow'規則。
Images.deny({
insert: function () {
return false
},
update:
created: function () {
return false
},
remove: function () {
return false
},
download: function () {
return false
},
})
Images.allow({
insert: function () {
return true
},
update:
created: function () {
return true
},
remove: function () {
return true
},
download: function () {
return true
},
})
在客戶端模板中添加一個檔案輸入按鈕以供使用者點擊。
<input type="file" name="..." class="myFileInput" />
像這樣處理事件：
Template.Profile.events({
"change .myFileInput": function (event, template) {
FS.Utility.eachFile(event, function (file) {
Images.insert(file, function (err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending on your needs
var userId = Meteor.userId()
var imagesURL = {
"profile.image": "/cfs/files/images/" + fileObj._id,
}
Meteor.users.update(userId, { $set: imagesURL })
}
})
})
},
})
最後，如果你已經移除了 autopublish 套件，不要忘記設定發佈和訂閱。
Meteor.publish("images", function () {
return Images.find()
})
在你的 iron:router 中訂閱它：
Router.route("/profile", {
waitOn: function () {
return Meteor.subscribe("images")
},
action: function () {
if (this.ready()) this.render("Profile")
else this.render("Loading")
},
})
我希望這個解決方案對你有所幫助。如果你正在使用Amazon S3 bucket，可以考慮使用 cfs:s3 作為適配器。如果所有其他方法都失敗了，Filepicker可以作為處理文件上傳的另一種方法。欲了解更多信息，請訪問 Filepicker的網站。
