javascript - Javascript DataTransfer 项目不会通过异步调用持久化
问题描述
我正在使用 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();
}
},
解决方案
一旦你调用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
在循环中使用更直观。另外,考虑并行连接是有限的。使用数组,您可以创建块来限制同时上传。
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>
推荐阅读
- javascript - 在 javascript 中设置 UTC -5 偏移量
- ios - 如何从一个 VC 中包含的一个 VC 过渡到一个新的 VC,该 VC 将包含在与另一个 VC 相同的 VC 中?
- c++ - 自然数除数的颜色
- vba - 在access数据库中的所有表中添加计算列
- python - 如何组合字典的不同键的每个值以在 Python 中生成数据框?
- html - 如何对齐css网格单元格中的元素?
- asp.net - 如何在 ASP.Net 中使用 Google AMP
- laravel - 使用 HTTP Accept-Language 标头设置用户的语言环境是个好主意吗?
- java - 将列表视图项中的随机数据添加到 Textview
- android - Android Button setOnClickListener 调用函数更改按钮图像