文件拖拽上传

实现前端文件拖拽上传，主要使用拖拽事件api，包括下面一些事件

• dragenter：鼠标拖拽时进入该元素时触发
• dragover：鼠标拖拽时在该元素中移动时触发
• dragleave：鼠标拖拽离开该元素时触发
• drop：鼠标拖拽的内容被释放时触发

1.样式

先来搞定样式

html

<div class="box">
    <span class="text">松开鼠标即可开始上传</span>
</div>

css

.box {
    width: 500px;
    height: 300px;
    border: 1px dashed gray;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text {
    display: none;
}
.cover {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px dashed #333;
}

js

const box = document.querySelector(".box");
const text = document.querySelector(".text");

box.addEventListener("dragenter", (e) => {
    e.preventDefault();
    const target = e.target;
    target.classList.add("cover");
    text.style.display = "inline";
});
box.addEventListener("dragover", (e) => {
    e.preventDefault(); // 必须阻止默认行为才能触发drop
});
box.addEventListener("dragleave", (e) => {
    e.preventDefault();
    const target = e.target;
    target.classList.remove("cover");
    text.style.display = "none";
});


box.addEventListener("drop", (e) => {

});

注意

必须在dragover事件中使用 e.preventDefault()阻止默认行为，drop事件才会被触发

样式效果如下：

2.处理文件数据

接下来就是在drop事件中获取文件信息，获取到这个文件信息就可以调接口上传了

box.addEventListener("drop", (e) => {
    e.preventDefault();
    e.stopPropagation();		// 防止冒泡
    const target = e.target;
    target.classList.remove("cover");

    const file = e.dataTransfer.files[0];  // 文件数据
    
});