前言：功能点概括：1、多选文件 2、选择文件夹 3、拖拽 4、选择后形成一个列表，列表里有一些信息 5、有进度条 6、控制并发数 7、可取消 8、展示统计信息
1. 交互实现
交互的目标是要拿到 file 对象。只要拿到 file 对象，就能通过网络上传。
1.1 如何选择多文件
给 input 添加 multiple 属性
<input type="file" multiple />1.2 如何选择文件夹
给 input 添加 webkitdirectory、mozddirectory、odirectory 属性
<input type="file" webkitdirectory mozddirectory odirectory />1.3 如何拖拽文件及文件夹
使用拖拽 API 触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
.container {
width: 100%;
height: 200px;
border: 1px solid;
}
</style>
</head>
<body>
<!-- 通过 $0.files 拿到所有文件File -->
<input type="file" multiple />
<div class="container"></div>
<script>
const div = document.querySelector(".container");
// 都需要阻止默认行为，因为div是不允许任何东西拖拽到它上面的
// 当进入时触发
div.ondragenter = (e) => {
console.log(1);
e.preventDefault();
};
// 当有东西在盒子上时不断的触发
div.ondragover = (e) => {
console.log(2);
e.preventDefault();
};
// 当有东西放在盒子上时触发
div.ondrop = (e) => {
e.preventDefault();
const items = e.dataTransfer.items;
for (const item of items) {
const entry = item.webkitGetAsEntry();
console.log(1, entry);
if (entry.isFile) {
// 处理文件：拿到File文件
entry.file((file) => {
console.log(2, file);
});
} else {
const reader = entry.createReader();
reader.readEntries((entries) => {
console.log(entries);
});
}
}
};
</script>
</body>
</html>2. 网络
网络部分用 XHR(axios) / fetch。
2.1 如何实现多文件上传
有两种方案，一种是所有文件合并到一次请求里。另一种单文件上传，需要和后端协商。我们一般采取第二种，这样有文件上传失败，也不会影响其他文件的上传。方便做进度跟踪，大文件切片，控制并发上传数。
2.2 如何实现进度追踪
上传进度跟踪 fetch 是实现不了的。只能实现下载的进度跟踪。我们可以通过 xhr.upload.onprogress 来控制上传进度跟踪。
2.3 如何实现取消上传
XHR 通过 xhr.abort() 直接取消。fetch 是通过控制器 AbortController 取消
标签：文件,console,log,JS,阿里,const,div,上传 From： https://blog.csdn.net/weixin_64684095/article/details/139456152