CollectionsFS 文件未上传到服务器

Question

我正在通过 discover meteor 项目（显微镜）自己工作，并尝试添加一个文件上传，这是我想由 CollectionFS 完成的。我的显微镜实现非常少。我正在尝试重建一个最小的 dribbble 或 Workdesk show and tell 网站。

我安装了： cfs:standard-包 cfs:filesystem cfs:ui

接下来我有一个名为 rooms 的 collection，它为用户 (lib/collections/rooms.js) 存储一个带有名称的房间：

Rooms = new Mongo.Collection("rooms");

还有一个房间图片 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;
    }
});

因为我删除了引用以减少调试工作，所以我有这个 publications.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
            });
        });
    });

现在我的 collection 有 cfs._tempstore.chunks cfs.roomImages.filerecord

尝试上传一张图片后（进度条未显示）cfs.roomImages.filerecord 已将文件作为 collection 项，但上传文件夹一直为空，因此我认为该文件不是上传了，同样如果我不给路径，默认文件夹不会生成。

我已经阅读了两个文档（网站和 github）并尝试了不同的示例，但其中大多数似乎已经过时。

我错过了什么吗？我不知道为什么文件没有上传到服务器。

Answer 1

如果您在客户端订阅，请尝试此代码。

首先在 /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 加载的第一个东西，所以我们在 server/client.

上都有可用的 fsCollection

现在我们需要上传一个新文件，所以让我们创建一个示例模板

首先，我们不希望在文件输入上单击 "accept" 时加载文件，所以我们放一个 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，检查 this gitHub issue and also if you use FSfileSystem on production on each deploy the files will be deleted(i think Modulus.io 尊重路径）。

如何解决？使用其他 2 个适配器 gridFs or s3, in my case i use GridFS, and GraphicsMagic 包

所以先安装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

CollectionsFS 文件未上传到服务器

CollectionsFS File is not uploaded to server

javascript

image-uploading

meteor