Vue拖拽文件进行上传

<template>

<div class="page-draggle">

<div

:class="[borderhover ? 'draggle-area-active' : '', 'draggle-area']"

id="draggle-area"

>

<div v-for="(item, index) in fileName" :key="index">

<div class="content_div">{{ item }}</div>

</div>

<div class="draggle-text">直接拖拽导入</div>

</div>

</div>

</template>

<script>

export default {

name: "",

data() {

return {

borderhover: false,

fileName: []

};

},

components: {},

methods: {

dragenter(e) {

this.borderhover = true;

this.preventDefault(e);

},

dragleave(e) {

this.borderhover = false;

this.preventDefault(e);

},

dragover(e) {

this.borderhover = true;

this.preventDefault(e);

},

enentDrop(e) {

this.borderhover = false;

this.preventDefault(e);

let fileData = e.dataTransfer.files;

this.uploadFile(fileData);

},

preventDefault(e) {

e.stopPropagation();

e.preventDefault(); //必填字段

},

uploadFile(file) {

let datas = new FormData();

datas.append("file", file);

let datas = new FormData();

datas.append("file", file);

for (let index = 0; index < file.length; index++) {

const element = file[index];

this.fileName.push(element['name'])

}

}

},

created() {},

mounted() {

// 1.文件第一次进入拖动区时，触发 dragenter 事件

// 2.文件在拖动区来回拖拽时，不断触发 dragover 事件

// 3.文件已经在拖动区，并松开鼠标时，触发 drop 事件

// 4.文件在拖动区来回拖拽时，不断触发dragleave 事件

var dropbox = document.getElementById("draggle-area");

console.log("22222", dropbox);

dropbox.addEventListener("drop", this.enentDrop, false);

dropbox.addEventListener("dragleave", this.dragleave, false);

dropbox.addEventListener("dragenter", this.dragenter, false);

dropbox.addEventListener("dragover", this.dragover, false);

},

computed: {}

};

</script>

<style scoped>

.page-draggle {

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

}

#draggle-area {

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

width: 100%;

height: 200px;

border: 1px solid black;

}

.content_div {

margin-left: 20px;

width: 200px;

height: 30px;

}

</style>