L
L
LebedevFF2020-02-12 17:30:51
JavaScript
LebedevFF, 2020-02-12 17:30:51

How to upload file to server via Vue?

The user can upload a group of files and they need to be transferred to the server. There is a problem with adding a file to
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);
            }
        });
    }
});

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
ReDev1L, 2020-02-13
@ReDev1L

And then "front-end developer, 150k rub"

F
Filart97, 2020-02-12
@Filart97

https://developer.mozilla.org/ru/docs/Web/API/Form...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question