我正在使用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();
}
},
Promise.All
处理它们怎么样?https://jsfiddle.net/g5h4ajm8/2/ - Temo Tchanukvadze