我正在通过发现流星项目(显微镜)并尝试添加文件上传,我想通过CollectionFS完成。我的显微镜实现非常少。我正在尝试重建一个最小的运球或办公桌节目并告诉网站。
我安装了:CFS:标准包装cfs:文件系统CFS:UI
接下来,我有一个名为rooms的集合,它为用户(lib/collections/rooms.js存储了一个带有名称的房间:
Rooms = new Mongo.Collection("rooms");
和一个roomImages CollectionFS Collection(lib/collections/roomImages.js):
var imageStore = new FS.Store.FileSystem("roomImageStore", {
path: "upload",
maxTries: 5 //optional, default 5
});
RoomFS = new FS.Collection('roomImages', {
stores: [imageStore],
filter: {
allow: {
contentTypes: ['image/*']
}
}
});
RoomFS.allow({
insert: function () {
return true;
},
update: function () {
return true;
},
remove: function () {
return true;
},
download: function () {
return true;
}
});
由于我已经删除了减少调试工作的引用,所以我有这个出版物.js
Meteor.publish('rooms', function() {
return Rooms.find();
});
Meteor.publish('singleRoom', function(id) {
check(id, String);
return Rooms.find(id);
});
Meteor.publish('roomImages', function(){
return RoomFS.find();
});
插入房间有效。最初创建聊天室后,用户将被路由到聊天室编辑页面。
<template name="roomEdit">
<form class="main form">
<input name="files" type="file" class="fileUploader" multiple>
{{#each images}}
{{#unless this.isUploaded}}
{{> FS.UploadProgressBar bootstrap=true}}
{{/unless}}
{{/each}}
</form>
</template>
我从自述文件中的文档中删除了该功能:
Template.roomEdit.events({
'change .fileUploader': function (event, template) {
FS.Utility.eachFile(event, function(file) {
RoomFS.insert(file, function (err, fileObj) {
//Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
});
});
});
现在在我的收藏中有cfs._tempstore.块cfs.roomImages.filerecord
尝试上传一张图像后(进度条未显示)cfs.roomImages.filerecord将文件作为收集项,但上传文件夹一直为空,因此我认为该文件未上传,此外,如果我不提供路径,则不会生成默认文件夹。
我已经阅读了这两个文档(网站和 github)并尝试了不同的示例,但其中大多数似乎已经过时了。
我错过了什么吗?我不知道为什么文件没有上传到服务器。
如果客户端上有订阅,请尝试此代码。
/lib/collection.js
文件夹上的第一个像这样声明 FSCollection
var imageStore = new FS.Store.FileSystem("roomImageStore", {
path: "upload",
maxTries: 5 //optional, default 5
});
roomImages = new FS.Collection('roomImages', {
stores: [imageStore]
});
而不是同一个文件订阅 FSCollection。
if(Meteor.isClient) {
Meteor.subscribe('RoomFS');
}
现在,/server/collections.js
进行与您相同的发布。
Meteor.publish('roomImages', function(){
return roomImages.find();
});
roomImages.allow({
insert:function(userId,doc){
if(Meteor.userId()){
return true; //if user is logged we return true
} else{
console.log("some foreign user try to upload a file take care"); //server log
return false
}
}
})
我们在/lib
文件夹上创建并订阅 FSCollection.. 为什么? 因为 lib 文件夹它是 Meteor 加载的 FIRS 东西,所以我们在两个server/client
上都提供了 FSCOLLECTION。
现在我们需要上传一个新文件,所以让我们创建一个示例模板
首先,我们不希望在文件输入上单击"接受"时加载文件,因此让我们放一个submit file button
,因此html看起来像这样。
在Client/exampleUpload.html
<template name="example">
<div class="form-group">
<label>Upload the Image</label>
<input id="testImage" type="file">
</div>
<button type="submit" id="uploadTest"> Click to upload</button>
</template>
在Client/exampleUpload.js
//events
Template.example.events({
'click #uploadTest':function(){
var file $('#testImage').get(0).files[0] / here we store the file
var fsFile = new fsFile(file); // here we add to the fsFile instance
fsFile.metadata = {
coolTextToImage:"this is a cool text" // here we add some metadata to the fs file
}
if(file === undefined){
alert("IF NOT IMAGE NOT INSER") //here we add some validation
} else{
roomImages.insert(fsFile,function(err,result){
if(err){
console.log(err.reason) // here we check if some error occurs when inserting
} else{
console.log(result) // if everything ok, wee should see a console.log with some like [Fs.file] object
}
})
}
}
})
编辑
我建议您使用 gridFS,检查此 gitHub 问题,如果您在每次部署的生产中使用 FS文件系统,文件将被删除(我认为 Modulus.io 尊重路径)。
如何解决? 使用其他 2 个适配器 gridF 或 s3,在我的情况下,我使用 GridFS 和 GraphicsMagic Package
所以首先安装 GM 软件包
meteor add cfs:graphicsmagick
使用此软件包,您可以控制size, type, etc of the file(image)
并像这样声明新的 FsCollection
imageStore = new FS.Collection("imageStores", {
stores: [new FS.Store.GridFS("imageStore",{
beforeWrite:function(fileObj){
return {
extension: 'png',
type: 'image/png'
};
},
transformWrite:function(fileObj, readStream, writeStream){
// Aqui la convierte en una imagen segun de 10x10 seguuuun
gm(readStream).resize(400).stream('PNG').pipe(writeStream); //resize depends your needs
}
})]
});
这只是一个建议,如果你计划部署应用
告诉我是否有效,GL