使用 meteor 和 dropbox 上传

Question

我正在尝试使用保管箱进行上传，但出了点问题，我不知道是什么问题。我在 Internet 上进行了一些搜索，但找不到任何内容。

这是我的代码：

if (Meteor.isClient) {
  Template.hello.helpers({
    uploads:function(){
      return Avatars.find();
    },
    images:function(){
      return Images.find();
    }
  });

  var avatarStoreLarge = new FS.Store.Dropbox("avatarsLarge");
  var avatarStoreSmall = new FS.Store.Dropbox("avatarsSmall");

  Avatars = new FS.Collection("avatars", {
    stores: [avatarStoreSmall, avatarStoreLarge],
    filter: {
      allow: {
        contentTypes: ['image/*']
      }
    }
  });

  Template.hello.events({
   'change .fileInput':function(event,template){
     FS.Utility.eachFile(event,function(file){
       var fileObj = new FS.File(file);
       Avatars.insert(fileObj,function(err){
         console.log(err);
       })
     })
   }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    var avatarStoreLarge = new FS.Store.Dropbox("avatarsLarge", {
      key: "xxxxxxxxxxxxxxx", 
      secret: "xxxxxxxxxxxxxxx", 
      token: "xxxxxxxxxxxxxxx", 
      transformWrite: function(fileObj, readStream, writeStream) {
        gm(readStream, fileObj.name()).resize('250', '250').stream().pipe(writeStream)
      }
    })

    var avatarStoreSmall = new FS.Store.Dropbox("avatarsSmall", {
      key: "xxxxxxxxxxxxxxx", 
      secret: "xxxxxxxxxxxxxxx", 
      token: "xxxxxxxxxxxxxxx",
      beforeWrite: function(fileObj) {
        fileObj.size(20, {store: "avatarStoreSmall", save: false});
      },
      transformWrite: function(fileObj, readStream, writeStream) {
        gm(readStream, fileObj.name()).resize('20', '20').stream().pipe(writeStream)
      }
    })

    Avatars = new FS.Collection("avatars", {
      stores: [avatarStoreSmall, avatarStoreLarge],
      filter: {
        allow: {
          contentTypes: ['image/*']
        }
      }
    })
  });
}

我按照 this documentation.

做了这个例子

Answer 1

首先，检查已安装的 meteor 包：meteor list，要使代码正常工作，您必须安装：

cfs:standard-packages
cfs:dropbox

其次，简化代码以减少错误前兆（文档required图像处理包中的示例），例如：

客户端

var dataStorage = new FS.Store.Dropbox("imageData");

Images = new FS.Collection("imageData", {
    stores: [dataStorage],
    filter: {
        allow: {
            contentTypes: ['image/*']
            }
        }
    });

Template.helpers块

'imageToShow': function(){
    return Images.find()
    },

Template.events块

'click #imageToUpload': function(event, template) {
            FS.Utility.eachFile(event, function(file) {
                Images.insert(file, function (err, fileObj) {});
                });
            },

服务器端

var dataStorage = new FS.Store.Dropbox("imageData", {
    key: "...",
    secret: "...",
    token: "..."
    });

Images = new FS.Collection("imageData", {
    stores: [dataStorage],
    filter: {
        allow: {
            contentTypes: ['image/*']
            }
        }
    });

第三，处理错误找出问题所在。

第四，从dropbox上传和下载图片需要时间，以测试你的应用程序使用轻量级文件。在客户端和服务器端使用 console.log 查看应用程序的流程。

Answer 2

首先检查您是否安装了以下软件包：

cfs:standard-packages
cfs:dropbox
cfs:gridfs

安装它们：

meteor add cfs:standard-packages
meteor add cfs:dropbox
meteor add cfs:gridfs

确保您的文件 "client/collections_client/avatar.js" 如下所示：

Template.hello.helpers({
  'imageToShow': function(){
      return Images.find()
      },
});

var dataStorage = new FS.Store.Dropbox("imageData");

Images = new FS.Collection("imageData", {
    stores: [dataStorage],
    filter: {
        allow: {
            contentTypes: ['image/*']
            }
        }
    });

Template.hello.events({
  'click #imageToUpload': function(event, template) {
             FS.Utility.eachFile(event, function(file) {
                 Images.insert(file, function (err, fileObj) {});
                 });
             },
});

"client/collections_client/hello.html"

<template name="hello">
  <input type="file" name="teste" id="imageToUpload">
</template>

<body>
{{> hello}}
</body>

假设你有 created your app:

"server/collections_server/avatar.js"

var dataStorage = new FS.Store.Dropbox("imageData", {
    key: "yourAppKey",
    secret: "yourAppSecret",
    token: "youroAuth2Token"
    });

Images = new FS.Collection("imageData", {
    stores: [dataStorage]
    });

使用 meteor 和 dropbox 上传

upload with meteor and dropbox

meteor

file-upload

dropbox-api

collectionfs