Javascript DataTransfer элементы не сохраняются через асинхронные вызовы

Question

Я использую Vuejs вместе с DataTransfer для асинхронной загрузки файлов, и я хочу разрешить одновременное перетаскивание и удаление нескольких файлов для загрузки.

Я могу получить первую загрузку, но с помощьюВо время загрузки Javascript либо собирал мусор, либо изменял объект элементов DataTransfer.

Как я могу переработать это (или клонировать объект события / DataTransfer), чтобы данные по-прежнему были доступны мне во время вызовов ajax?

Я следовал документам MDN о том, какиспользовать DataTransfer, но мне сложно применить его в моем конкретном случае.Я также попытался скопировать объекты событий, как вы можете видеть в моем коде, но он явно не делает глубокое копирование, просто передает ссылку, что не помогает.

    methods: {
        dropHandler: function (event) {
            if (event.dataTransfer.items) {
                let i = 0;
                let self = this;
                let ev = event;

                function uploadHandler() {
                    let items = ev.dataTransfer.items;
                    let len = items.length;

                    // len NOW EQUALS 4

                    console.log("LEN: ", len);
                    if (items[i].kind === 'file') {
                        var file = items[i].getAsFile();
                        $('#id_file_name').val(file.name);
                        var file_form = $('#fileform2').get(0);
                        var form_data = new FormData(file_form); 

                        if (form_data) {
                            form_data.append('file', file);
                            form_data.append('type', self.type);
                        }

                        $('#file_progress_' + self.type).show();
                        var post_url = '/blah/blah/add/' + self.object_id + '/'; 
                        $.ajax({
                            url: post_url,
                            type: 'POST',
                            data: form_data,
                            contentType: false,
                            processData: false,
                            xhr: function () {
                                var xhr = $.ajaxSettings.xhr();
                                if (xhr.upload) {
                                    xhr.upload.addEventListener('progress', function (event) {
                                        var percent = 0;
                                        var position = event.loaded || event.position;
                                        var total = event.total;
                                        if (event.lengthComputable) {
                                            percent = Math.ceil(position / total * 100);
                                            $('#file_progress_' + self.type).val(percent);
                                        }
                                    }, true);
                                }
                                return xhr;
                            }
                        }).done((response) => {
                                i++;
                                if (i < len) {

                                    // BY NOW, LEN = 0.  ????

                                    uploadHandler();
                                } else {
                                    self.populate_file_lists();
                                }
                            }
                        );
                    }
                }

                uploadHandler();
            }
        },