0

我目前正在开发一个图像共享平台，使用 Meteor、CollectionFS 和 GridFS StorageAdapter。

我也在使用优秀的包dbarrett:dropzonejs，但问题是它对 CollectionFS 的实现，特别是关于 XHR 和 uploadprogress 的东西。

现在，我使用此代码。

问题：上传文件时，我在控制台中注意到不需要的 POST 请求以及来自 CollectionFS 的 PUT 请求。我将它们缩小到 dbarrett_dropzone.js 文件中的 xhr.send() 。为了阻止它们，我尝试了 template.rendered > dropzone options ：

init: function() {
    this.on("sending", function(file,xhr) {
        xhr.abort(); //file.xhr.abort() does not work either...
    });
} // console shows "NS_ERROR_NOT_INITIALIZED"

或覆盖 dropzone.accept ：

},
accept: function(file,done) {
    done("dummy message");
},

但随后它会阻止填充队列数组，这是 CollectionFS 插入所必需的......

问题：我认为需要覆盖 dropzone.uploadFiles(files) 函数，所有 xhr 内容都在其中写入，......但是我所有的尝试都失败了，有人可以提出一个实现吗？

理想情况下，我认为这样的实现会是这样的：

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        init: function() {
            this.on("success", function(file) {
                Meteor.setTimeout(function() {
                    dz.removeFile(file);
                },3000)
            });
        },
        uploadFiles: function(files) {
            var dzgqf = dz.getQueuedFiles();
            if (dzgqf.length) {
                dzgqf.forEach(function(file) {
                    var fsFile = new FS.File(file);
                    fsFile.owner = Meteor.userId();
                    Images.insert(fsFile, function(error, fileObj) {
                        if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                        // how to pass properly fileObj.updateProgress() stuff to dz.uploadprogress event ???
                    });
                });
            }
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone;
        console.log("Queued files : ", dz.getQueuedFiles());
        dz.processQueue();
     }
});
4

2 回答 2

0

我使用以下代码使用 DropzoneJs 和 GridFS 发送图像。ProcessImage用于在将图像发送到服务器之前先在客户端调整图像大小。

Template.imageUpload.rendered = function() {
    Dropzone.autoDiscover = false;
    var dropzone = new Dropzone("form#dropzone", {
        acceptedFiles: 'image/*',
        accept: function(file, done) {

            processImage(file, 1024, 1024, function(data) {
                var img = new FS.File(data);
                img.owner = Meteor.userId();
                img.metadata = {
                    sourceId: Session.get('conditionUniqueId'),
                    staged: true
                };

                Images.insert(img, function(err, fileObj) {
                    if (err) {
                        return console.log(err);
                    } else {
                        dropzone.emit("complete", file).emit("success", file);
                    }
                });
            })

            done();
        }

    });
}
于 2016-01-07T12:08:10.313 回答
0

更新

在测试了许多解决方法后，我最终得到了以下工作解决方案：

Template.albumContent.rendered = function() {
    var dz = new Dropzone("form#dzId", {
        url: "#",
        autoProcessQueue: false,
        addRemoveLinks: true,
        acceptedFiles: "image/*",
        maxFilesize: 10,
        init: function() {
            this.on("success", function(file) {
                dz.removeFile(file);
            });
            this.on("queuecomplete", function() {
                dz.removeAllFiles(); // removes remaining rejected files
            });
        }
    });
}

Template.albumContent.events({
    "click .js-upload-all-images": function(event, template) {
        event.preventDefault(); event.stopPropagation();
        var dz = Dropzone.getElement("#dzId").dropzone,
            dzgqf = dz.getQueuedFiles();
        console.log("Queued files : ", dzgqf);

        if (dzgqf.length) {
            dzgqf.forEach(function(file) {
                var fsFile = new FS.File(file);
                fsFile.owner = Meteor.userId();
                fsFile.metadata = {
                    name: file.name
                };
                Images.insert(fsFile, function(error, fileObj) {
                    if (error) throw new Meteor.Error("Error uploading this file : ", fsFile);
                    Tracker.autorun( function() {
                        var fO = Images.findOne(fileObj._id);
                        if (fO.uploadProgress() !== 100) {
                            console.log(f0.metadata.name + ": chunk " + f0.chunkCount+"/"+fO.chunkSum + " - Progress " + fO.uploadProgress()+"%");
                            dz.emit("uploadprogress", file, fO.uploadProgress());
                        }
                        else {// if (fileObj.hasStored("mediasStore") {
                            console.log("File " + f0.metadata.name + " were successfully stored in FScollection 'Images'");
                            dz.emit(complete, file) // removes file's progressbar
                              .emit("success" file); // shows the checkmark then auto slides it out
                        }
                    });
                });
            });
        }
     }
});

并不真正符合 DropzoneJS 事件的预期，但至少进度显示正在工作，没有 xhr POST 触发。

错误：未找到“_ref.parentNode”，来自“removedFile”事件

如果有人有更清洁的实现，请随时发布！

如果 enyo 读到这个，纠正我的例子会很好，为什么不在 DropzoneJS 主页上分享它。Atmosphere 包页面中的 dbarrett 也是如此。

于 2015-10-14T12:21:21.253 回答