Пользователь может загрузить группу файлов, и их нужно передать на сервер. Есть проблема с добавлением файла в
formData
new Vue({
el: "#app",
data: function() {
uploadedFiles: []
},
methods: {
uploadFiles: function(f) {
var self = this;
var formData = new FormData();
function loadFiles(file,count) {
var name = file.name;
var reader = new FileReader();
formData.append('file' + (count + 1), reader.readAsText(file, "UTF-8")); // file 1 undefined
}
byte = null;
for(var i = 0; i < f.length; i++){
if(byte + f[i].size <= (1048576 * 15)){
byte += f[i].size;
loadFiles(f[i],i);
}else{
console.log("Загружаемый файл слишком велик");
}
console.log("[" + f[i].name + "] " + f[i].size)
}
console.log(formData);
fetch('/api?method=DoWnLoAdFileLIPS', {
method: 'POST',
body: formData
}).then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
}
},
mounted() {
var self = this;
window.addEventListener("dragenter", function (e) {
if (window.location.pathname == "/") {
document.querySelector("#dropzone").style.visibility = "";
document.querySelector("#apps").style.zIndex = 11;
document.querySelector("#apps").style.backgroundColor = "var(--bg-color2)";
document.querySelector("#dropzone").style.opacity = 1;
document.querySelector("#textnode").style.fontSize = "48px";
}
});
window.addEventListener("dragover", function (e) {
e.preventDefault();
if (window.location.pathname == "/") {
document.querySelector("#dropzone").style.visibility = "";
document.querySelector("#apps").style.zIndex = 11;
document.querySelector("#apps").style.backgroundColor = "var(--bg-color2)";
document.querySelector("#dropzone").style.opacity = 1;
document.querySelector("#textnode").style.fontSize = "48px";
}
});
window.addEventListener("drop", function (e) {
e.preventDefault();
if (window.location.pathname == "/") {
document.querySelector("#dropzone").style.visibility = "hidden";
document.querySelector("#apps").style.zIndex = 0;
document.querySelector("#apps").style.backgroundColor = "#0000";
document.querySelector("#dropzone").style.opacity = 0;
document.querySelector("#textnode").style.fontSize = "42px";
var files = e.dataTransfer.files;
console.log("Drop files:", files);
self.uploadFiles(files);
}
});
}
});
