Question

我对某事感到困惑。我试图使用dropzone.js meteor包（http://atmospherejs.com/dbarrett/dropzonejs）和我的流星应用程序，但我找不到任何关于它的例子。在文档中它说：使用像这样的模板

{{> dropzone url='http://somewebsite.com/upload' id='dropzoneDiv'}}

和

它会将所有上传的文件发布到您选择的网址。

所以，如果我写，

{{> dropzone url='http://localhost:3000/home' id='dropzoneDiv'}}

一旦我删除图像，它是否会将其上传到/ public / home文件夹？我的意思是包处理服务器端保存图像呢？如果没有，你能否给我一些关于我如何处理服务器端保存的提示？

谢谢

Answer 1

Dropzone可能有点令人困惑：

首先，你应该为Meteor获得一个文件管理系统。现在的标准是CollectionFS：

https://github.com/CollectionFS/Meteor-CollectionFS

然后你需要添加一个文件系统。我使用GridFS，它将大文件拆分成块并将它们存储到Mongo中：

https://github.com/CollectionFS/Meteor-cfs-gridfs/

按照创建，发布和订阅新的特殊FS系列的说明进行操作：

example for creating the collection: 

MyImages = new FS.Collection('myImages', {
    stores: [new FS.Store.GridFS("myImages")]
});

安装完这两个后，创建你的dropzone：

<template name="imageUpload">
  <form action="/file-upload" class="dropzone" id="dropzone"></form>
</template>

然后在你的javascript中：

Template.imageUpload.rendered = function(){

  if (Meteor.isClient){

    var arrayOfImageIds = [];

    Dropzone.autoDiscover = false;

    // Adds file uploading and adds the imageID of the file uploaded
    // to the arrayOfImageIds object.

    var dropzone = new Dropzone("form#dropzone", {
        accept: function(file, done){
            MyImages.insert(file, function(err, fileObj){
                if(err){
                  alert("Error");
                } else {
                  // gets the ID of the image that was uploaded
                  var imageId = fileObj._id;
                  // do something with this image ID, like save it somewhere
                  arrayOfImageIds.push(imageId);
                };
            });
        }
    });
  };

};

Answer 2

我假设，它没有显示上传进度，因为它的瞬间与流星。

您正在浏览器中更新mini-mongo位置，因此可以立即进行更改。

Meteor DDP然后处理粘合剂以将其送到服务器，然后将这些更改推送到可能订阅的其他客户端。那个“即时”更新是流星魔术。提醒自己，或成功登录控制台。您还可以通过MyImages.find（）。fetch（）检查数据库。

如果他们在那里，一切都完成了。

Answer 3

Please find below link(example of dropzonejs):

https://github.com/devonbarrett/meteor-dropzone/tree/master/example-app

Put  {{>dropzone url="/upload" id="template-helper"}} In your template

<template name="test">
   {{>dropzone url="/upload" id="template-helper"}}
</template>

Then at server side:
if (Meteor.isServer) {
  Meteor.startup(function () {
    UploadServer.init({
      tmpDir: process.env.PWD + '/public/uploads',
      uploadDir: process.env.PWD + '/public/uploads',
      checkCreateDirectories: true,
      uploadUrl: '/upload'
    });
  });
}

将dropzone.js与meteor.js一起使用

3 个答案: