VueJS dropzone 在 drag/drop 上无法正常工作

Question

我正在使用 vue2-dropzone 库，我的抱怨是 dropzone 组件的 ref 值不包含用户删除的文件。用户添加第二个文件后，dropzone 的 ref 仅包含前一个文件。但是当用户 select 在文件对话框中时它可以正常工作。

<vue-dropzone ref="docfile" id="dropzone" :options="dzOptions"></vue-dropzone>

dzOptions: {
    url: self.$apiUrl + "client/documents/",
    autoProcessQueue: false,
    acceptedFiles: "application/pdf",
    uploadMultiple: false,
    maxNumberOfFiles: 1,
    maxFilesize: 30,
    addRemoveLinks: true,
    dictDefaultMessage: "Select File",
    init: function() {
        this.on("addedfiles", function(files) {
            if (files.length > 1) {
                self.$toaster.error("You can upload only one.");
                this.removeAllFiles();
                return;
            }
            if (files[0].type != "application/pdf") {
                self.$toaster.error("You can upload only pdf file.");
                this.removeAllFiles();
                return;
            }
            self.upload();
        });
    }
}

upload() {
    var self = this;
    if (self.$refs.docfile.dropzone.files.length == 0) {
        self.$toaster.error("No document to upload.");
        return;
    }
    var filePath = self.$refs.docfile.dropzone.files[0];
    ...
}

Answer 1

您正在这样访问您的参考资料：

self.$refs.docfile.dropzone

这样试试：

self.$refs.docfile

根据文件，您可以使用以下方法获取它们：getAcceptedFiles()、getRejectedFiles()、getQueuedFiles() 方法。

一些关于如何使用 vue-uploads 事件的例子：

data: () => ({
    dropzoneOptions: {
      ...
    },
    myFiles: []
}),

<vue-dropzone ref="myVueDropzone" id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-success="filesUploaded">
</vue-dropzone>

filesUploaded(event){
    this.myFiles.push(JSON.parse(event.xhr.response));
},

Answer 2

我发现用户拖动文件时有延迟。所以我已经使用 timeout in dropzone 选项解决了这个问题，如下所示。

dzOptions: {
    url: self.$apiUrl + "client/documents/",
    autoProcessQueue: false,
    acceptedFiles: "application/pdf",
    uploadMultiple: false,
    maxNumberOfFiles: 1,
    maxFilesize: 30,
    addRemoveLinks: true,
    dictDefaultMessage:
        "Select File",
    init: function() {
        this.on("addedfiles", function(files) {
            var dz = this;
            setTimeout(function() {
                self.upload();
            }, 500);
        });
    }
}

VueJS dropzone 在 drag/drop 上无法正常工作

VueJS dropzone does not working properly on drag/drop

vue.js

vue2-dropzone