1

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

<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];
    ...
}
4

2 回答 2

0

您正在访问您的参考资料，如下所示：

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));
},
于 2018-08-30T19:43:30.050 回答
0

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

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);
        });
    }
}
于 2018-08-31T04:24:39.420 回答