VueJS dropzone не работает должным образом при перетаскивании - PullRequest
Новая
       20

VueJS dropzone не работает должным образом при перетаскивании

0 голосов
/ 30 августа 2018

Я использую библиотеку vue2-dropzone, и моя жалоба заключается в том, что значение ref компонента dropzone не содержит файла, который пользователь удалил. После того, как пользователь добавляет второй файл, ссылка на 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];
    ...
}

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Я обнаружил, что при перетаскивании файла пользователем происходит задержка. Так что я исправил эту проблему, используя тайм-аут в параметре 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);
        });
    }
}
0 голосов
/ 30 августа 2018

Вы обращаетесь к своим ссылкам, как это: 

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));
},
...