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

Answer 1

一旦您调用 await您不再位于函数的原始调用堆栈中。这在事件监听器中尤其重要。

我们可以用 setTimeout 重现相同的效果:

dropZone.addEventListener('drop', async (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.items);
  setTimeout(()=> {
    console.log(e.dataTransfer.items);
  })
});

例如拖动四个文件会输出:

DataTransferItemList {0: DataTransferItem, 1: DataTransferItem, 2: DataTransferItem, 3: DataTransferItem, length: 4}  
DataTransferItemList {length: 0}

事件发生后，状态发生了变化， 元素丢失 .

有两种方法可以处理此问题:

复制项目并对其进行迭代

将异步作业(Promises)推送到数组中，稍后使用 Promise.all 处理它们

第二种解决方案比使用 await 更直观。在循环。另外，请考虑 parallel connections are limited .使用数组，您可以创建 block 来限制同时上传。

function pointlessDelay() {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
  });
}

const dropZone = document.querySelector('.dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropZone.addEventListener('drop', async (e) => {
  e.preventDefault();
  console.log(e.dataTransfer.items);
  const queue = [];
  
  for (const item of e.dataTransfer.items) {
    console.log('next loop');
    const entry = item.webkitGetAsEntry();
    console.log({item, entry});
    queue.push(pointlessDelay().then(x=> console.log(`${entry.name} uploaded`)));
  }
  
  await Promise.all(queue);
});

body {
  font-family: sans-serif;
}

.dropZone {
  display: inline-flex;
  background: #3498db;
  color: #ecf0f1;
  border: 0.3em dashed #ecf0f1;
  border-radius: 0.3em;
  padding: 5em;
  font-size: 1.2em;
}

<div class="dropZone">
  Drop Zone
</div>