Vue3問題：如何實現拼圖驗證+郵箱登錄功能？前后端！
1. 需求分析
文件上傳，可以說是我們在項目中最常用的功能之一。
文件上傳一般有兩種形式：點擊上傳和拖拽上傳。而上傳的內容，又大體包括：文件和文件夾。
在項目中，我們一般都會直接選擇使用UI庫提供的上傳組件，簡單配置一下必要的屬性，就實現了文件上傳功能，至于組件底層實現的原理，是絲毫不知。
所以今天，針對文件和文件夾的拖拽上傳功能，我整理了一下具體的實現，很簡單一起瞧瞧。
2. 問題實現
先普及一下元素拖拽的幾個API知識點，再放上文件拖拽上傳的實現代碼，并做簡單的描述，最后做小結。
（1）拖拽的6個API
元素拖拽的6個API分別是：dragenter、dragover、drop 以及dragstart、drag、dragend。
ondragstart 事件：該事件在拖動操作開始時觸發，即拖動操作的起點。通常在該事件的處理函數中設置拖動的數據和效果。
drag 事件：該事件在元素正在被拖動時持續觸發，即在拖動過程中。可以在該事件的處理函數中執行一些實時的操作，例如更新元素的位置或顯示一些效果。
dragend 事件：該事件在拖動操作結束時觸發，即拖動操作的終點。通常在該事件的處理函數中執行一些清理操作或其他邏輯。
這三個事件通常用于控制拖動元素起始、過程和結束階段的行為。
ondragenter 事件：該事件在拖動元素進入目標元素的范圍時觸發?？梢栽谠撌录奶幚砗瘮抵袌绦幸恍╋@示效果或狀態改變等操作。
ondragover 事件：該事件在拖動元素在目標元素上移動時持續觸發，即在拖動元素在目標元素上懸停期間。通常需要阻止默認的拖放行為，以便允許在目標元素上釋放。
ondrop 事件：該事件在拖動元素在目標元素上釋放時觸發?？梢栽谠撌录奶幚砗瘮抵蝎@取拖動的數據并執行相應的操作。
這三個事件通常用于控制目標元素在接受拖動元素時的行為。
（2）文件拖拽上傳實現
元素拖拽的6個API，這里我們只需要使用dragover、drop這兩個，就能實現文件拖拽上傳。
下面簡單描述一下實現過程，具體細節大家看代碼就好，原理很簡單。
先獲取頁面中的 DropFrame 元素，再為其添加兩個事件監聽器。
dragover 事件監聽器：當有元素拖拽到 DropFrame 區域時觸發，用于指定拖放操作的效果。這里必須阻止事件默認行為，否則文件是拖不上去的，會被瀏覽器所阻止。
drop 事件監聽器：當在 DropFrame 區域釋放拖拽的元素時觸發，用于處理拖放完成后的操作。內部通過遍歷e.dataTransfer.items ，判斷文件或文件夾，文件就直接獲取File對象，文件夾則遞歸獲取內部文件的File對象，最后依次單獨上傳服務器。
完整實現代碼如下，復制即可使用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#DropFrame {
width: 360px;
height: 120px;
background-color: #b8deff;
border: solid 1px #3470ff;
}
</style>
</head>
<body>
<!-- 拖拽區域 -->
<div id="DropFrame">文件拖到這里上傳</div>
</body>
<script>
let dropFrame = document.getElementById('DropFrame');
// 拖動元素在目標元素上懸停期間
dropFrame.addEventListener('dragover', (e) => {
// 阻止默認事件和冒泡 必須寫
e.stopPropagation();
e.preventDefault();
});
// 拖動元素在目標元素上釋放時觸發
dropFrame.addEventListener('drop', (e) => {
// 阻止默認事件和冒泡 必須寫
e.stopPropagation();
e.preventDefault();
// 文件上傳處理邏輯
let items = e.dataTransfer.items;
for (const item of items) {
// 提取Entry對象
const entry = item.webkitGetAsEntry();
if (entry.isFile) {
// 處理文件，拿到File文件
entry.file((file) => {
console.log(file, 'file');
// 上傳文件到服務器
// var formData = new FormData();
// formData.append('file', file);
// axios.post('/upload', formData, {})
})
} else {
// 處理文件夾，拿到FileEntry對象
const reader = entry.createReader()
reader.readEntries((entries) => {
reHandleFile(entries)
})
}
}
});
// 如果文件夾是多級，則遞歸讀取
const reHandleFile = (entries) => {
for (const entry of entries) {
if (entry.isFile) {
// 處理文件，拿到File文件
entry.file((file) => {
console.log(file, 'file');
// 上傳文件到服務器
// var formData = new FormData();
// formData.append('file', file);
// axios.post('/upload', formData, {})
})
} else {
// 處理文件夾，拿到FileEntry對象
const reader = entry.createReader()
reader.readEntries((entries) => {
// 遞歸
reHandleFile(entries)
})
}
}
}
</script>
</html>（3）小結
本文簡單介紹了，元素拖拽的6個API，以及文件拖拽上傳的實現過程。
元素拖拽的6個API，這里我們只需要使用dragover、drop這兩個，就能實現文件拖拽上傳。
值得注意的是，必須阻止事件默認行為，否則文件是拖不上去的，會被瀏覽器所阻止。
