前言
本次开发对象云存储（OSS）运用到了文件上传，文件夹上传和拖拽上传这三个功能。开发基于VUE,但是其他框架的需要应用到的都可以应用。然后由于操作流程不一样需要自己去完成一个拖拽上传组件，但是网上查询的其他同学写的代码，2w-3w文件读取需要40s-60s 甚至更长，原因是递归方式的写法上有问题,关键是什么时候读取结束也是不可掌控的。这样的话做读取的loading状态也不方便。所以自己用了一段时间去完善上传。最终效果是2w-3w读取效果在4-6s
文件上传就是 input[file] 类型。
文件夹上传是在input[file]类型的基础上添加了webkitdirectory属性。
文件拖拽上传基于 webkitGetAsEntry + createReader原生API实现文件夹内列表的读取。
说明：优先考虑需求实现再去谈兼容，拖拽使用webkitGetAsEntry 和 createReader都有兼容性得，但是目前浏览器都在尽量的适配这些API，因为这也是前端开发常用的需求。
注意：createReader 这个API Opera目前任然不支持，webkitGetAsEntry 这个API各大版本均有支持。
实现的效果如下
一、什么场景使用拖拽上传？
如果有10个文件夹，使用原生的input[file] + webkitdirectory 去上传文件夹只能一个一个的选择。此时拖拽就派上用场了。
操作的易用性，我们都知道点击文件夹上传会发现文件夹下不展示文件列表，因为webkitdirectory 属性会过滤掉文件，只剩下文件夹，而拖拽会清晰的展示结构。如果使用input 上传会发现，上传文件就只能选择文件类型。上传文件夹就只能选择文件夹。拖拽上传不用管这些，拖什么就上传什么。
二、实现方式 - JS版本
1.HTML 部分-js
<body>
<button class="upload_file">上传文件</button>
<button class="upload_dir">上传文件夹</button>
<input type="file" class="file" hidden>
<input type="file" webkitdirectory class="dir" hidden>
<div class="drag_upload">
<div class="tip">拖拽上传或者点击 <button>上传文件</button></div>
</div>
</body>2. JS 部分
<script>
const upload_file = document.querySelector('.upload_file')
const upload_dir = document.querySelector('.upload_dir')
const drag_upload = document.querySelector('.drag_upload')
const file_input = document.querySelector('.file')
const dir_input = document.querySelector('.dir')
// 点击上传文件按钮
upload_file.addEventListener('click', () => {
file_input.click()
})
// 点击上传文件夹按钮
upload_dir.addEventListener('click', () => {
dir_input.click()
})
drag_upload.addEventListener('dragenter', dragEnter)
drag_upload.addEventListener('dragover', dragOver)
drag_upload.addEventListener('drop', drop)
function dragEnter(e) {
e.preventDefault()
}
function dragOver(e) {
e.preventDefault()
}
function drop(e) {
e.preventDefault()
const dataTransfer = e.dataTransfer
if (
dataTransfer.items &&
dataTransfer.items[0] &&
dataTransfer.items[0].webkitGetAsEntry
) {
webkitReadDataTransfer(dataTransfer)
}
}
function webkitReadDataTransfer(dataTransfer) {
var fileNum = dataTransfer.items.length
var files = []
const items = dataTransfer.items
// 根据拖拽得数量去遍历每一项
for (var i = 0; i < items.length; i++) {
var entry = items[i].webkitGetAsEntry()
if (!entry) {
decrement()
return
}
console.log(entry)
if (entry.isFile) {
readFiles(items[i].getAsFile(), entry.fullPath)
} else {
readDirectory(entry.createReader())
}
}
function readDirectory(reader) {
// readEntries() 方法用于检索正在读取的目录中的目录条目，并将它们以数组的形式传递给提供的回调函数。
reader.readEntries((entries) => {
if (entries.length) {
fileNum += entries.length
entries.forEach((entry) => {
if (entry.isFile) {
entry.file((file) => {
readFiles(file, entry.fullPath)
}, readError)
} else if (entry.isDirectory) {
readDirectory(entry.createReader())
}
})
readDirectory(reader)
} else {
decrement()
}
}, readError)
}
function readFiles(file, fullPath) {
file.relativePath = fullPath.substring(1)
files.push(file)
decrement()
}
function readError(fileError) {
console.log(fileError)
throw fileError
}
function decrement() {
if (--fileNum === 0) {
console.log(files, 123)
}
}
}
</script>注意事项
注意点：需要注我用的是HTML文件实现的。如果您也应用的是HTML，直接打开上传会报错。需要以项目方式启动。这里推荐vscode使用 Go Live 插件去启动这个html。上面这个示例只是一个小demo，input 没有注册事件，可以自行完善。可以参考下面完全版本。
三、VUE 版本 - 完全版本，也是上面示例动图的版本
<template>
<div class="upload_demo">
<div class="table_info">
<div>
<el-button @click="clearList">清空列表</el-button>
<el-button
@click="uploadFile('file')"
:disabled="tableData.length >= 100"
>上传文件</el-button
>
<el-button
@click="uploadFile('folder')"
:disabled="tableData.length >= 100"
>上传文件夹</el-button
>
</div>
<div class="info">
<span>{{ tableData.length }}/ 100文件</span>
<span>大小 {{ handleStorage(totalSize) }}</span>
</div>
</div>
<div
ref="drag"
draggable="true"
class="drag tableBox"
@dragover="dragover"
:class="{ drag_border: tableData.length }"
@drop="onDrop"
>
<div class="el-upload__text" v-show="!tableData.length">
<i class="el-icon-upload" style="margin-right: 6px"></i
>拖拽文件/文件夹到此处或者
<el-button type="text" @click="addFiles">添加文件</el-button>
</div>
<div v-show="!tableData.length" class="el-upload__text">
文件上传数量不能超过100个，总大小不超过5GB
</div>
<el-table
:data="tableData"
v-show="tableData.length"
class="table_Height"
stripe
height="240px"
>
<el-table-column prop="name" label="名称">
<template v-slot="{ row }">
<span v-if="row.isFolder" style="margin-right: 6px">
<i class="el-icon-folder-opened"></i>
</span>
<span v-else style="margin-right: 6px">
<i class="el-icon-document"></i>
</span>
<span>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="size" label="文件大小" width="200px">
<template v-slot="{ row }">
{{ handleStorage(row.size) }}
</template>
</el-table-column>
<el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }">
<el-button
type="text"
:disabled="!!row.loaded"
@click.stop="deleteFile(row, $index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!-- 文件读取中不能上传，文件上传数量不能超过100，总大小不能超过 5 GB -->
<div class="flex_center" style="margin-top: 20px">
<el-button
type="primary"
:loading="loading"
:disabled="
loading ||
tableData.length > 100 ||
totalSize > 5 * 1024 * 1024 * 1024
"
@click="uploadFileList"
>{{ loading ? "文件读取中" : "上传" }}</el-button
>
</div>
<!-- 上传文件 -->
<input type="file" ref="file" hidden multiple @change="uploadeFile" />
<!-- 上传文件夹-->
<input
type="file"
ref="folder"
hidden
@change="folderChange"
multiple
webkitdirectory
/>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
uploading: false,
time: 0,
loading: false,
};
},
computed: {
totalSize() {
let total = 0;
this.tableData.forEach((item) => {
total += item.size;
});
return total;
},
},
methods: {
addFiles() {
this.$nextTick(() => {
this.$refs["file"].click();
});
},
dragover(e) {
e.preventDefault();
},
onDrop(e) {
e.preventDefault();
const dataTransfer = e.dataTransfer;
if (
dataTransfer.items &&
dataTransfer.items[0] &&
dataTransfer.items[0].webkitGetAsEntry
) {
this.webkitReadDataTransfer(dataTransfer, e);
}
},
// 拖拽文件处理
webkitReadDataTransfer(dataTransfer) {
let fileNum = dataTransfer.items.length;
let files = [];
this.loading = true;
// 递减计数，当fileNum为0，说明读取文件完毕
const decrement = () => {
if (--fileNum === 0) {
this.handleFiles(files);
this.loading = false;
}
};
// 递归读取文件方法
const readDirectory = (reader) => {
// readEntries() 方法用于检索正在读取的目录中的目录条目，并将它们以数组的形式传递给提供的回调函数。
reader.readEntries((entries) => {
if (entries.length) {
fileNum += entries.length;
entries.forEach((entry) => {
if (entry.isFile) {
entry.file((file) => {
readFiles(file, entry.fullPath);
}, readError);
} else if (entry.isDirectory) {
readDirectory(entry.createReader());
}
});
readDirectory(reader);
} else {
decrement();
}
}, readError);
};
// 文件对象
const items = dataTransfer.items;
// 拖拽文件遍历读取
for (var i = 0; i < items.length; i++) {
var entry = items[i].webkitGetAsEntry();
if (!entry) {
decrement();
return;
}
if (entry.isFile) {
readFiles(items[i].getAsFile(), entry.fullPath, "file");
} else {
// entry.createReader() 读取目录。
readDirectory(entry.createReader());
}
}
function readFiles(file, fullPath) {
file.relativePath = fullPath.substring(1);
files.push(file);
decrement();
}
function readError(fileError) {
throw fileError;
}
},
handleFiles(files) {
// 按文件名称去存储列表，考虑到批量拖拽不会有同名文件出现
const dirObj = {};
files.forEach((item) => {
// relativePath 和 name 一致表示上传的为文件，不一致为文件夹
// 文件直接放入table表格中
if (item.relativePath === item.name) {
this.tableData.push({
name: item.name,
filesList: [item.file],
isFolder: false,
size: item.size,
});
}
// 文件夹，需要处理后放在表格中
if (item.relativePath !== item.name) {
const filderName = item.relativePath.split("/")[0];
if (dirObj[filderName]) {
// 放入文件夹下的列表内
let dirList = dirObj[filderName].filesList || [];
dirList.push(item);
dirObj[filderName].filesList = dirList;
// 统计文件大小
let dirSize = dirObj[filderName].size;
dirObj[filderName].size = dirSize ? dirSize + item.size : item.size;
} else {
dirObj[filderName] = {
filesList: [item],
size: item.size,
};
}
}
});
// 放入tableData
Object.keys(dirObj).forEach((key) => {
this.tableData.push({
name: key,
filesList: dirObj[key].filesList,
isFolder: true,
size: dirObj[key].size,
});
});
},
// input选择文件夹只能单选
folderChange(e) {
const filesList = e.target.files;
let size = 0;
const fileName = filesList[0].webkitRelativePath.split("/")[0];
Array.from(filesList).forEach((item) => {
item.relativePath = item.webkitRelativePath;
size += item.size;
});
const fileObj = {
name: fileName,
filesList,
isFolder: true,
size,
};
this.tableData.push(fileObj);
},
deleteFile(row, index) {
// 至于为什么不用filter,而是通过下标删除，需要考虑文件同名同样大小问题。
// 当然通过index去删除也不是最好办法，最好办法是生成为一hash,可以通过md5去计算。大批量文件md5也比较耗费时间
this.tableData.splice(index, index + 1);
},
uploadFile(ref, e) {
if (e) e.stopPropagation();
this.$refs[ref].click();
},
// 清空文件
clearList() {
this.tableData = [];
},
// 选择文档后的处理
async uploadeFile() {
try {
const dom = this.$refs["file"];
const files = dom.files;
if (files.length > 200) {
this.$message.warning("每次最多上传200个文件");
return;
}
Array.from(files).forEach((file) => {
this.tableData.push({
name: file.name,
filesList: [file],
isFolder: false,
size: file.size,
});
});
dom.value = "";
} catch (error) {
console.log(error);
}
},
// 文件上传,需要注意浏览器不同允许并发的数量也不同大多在4-8个区间 edeg 和 chrome 允许6个同时发送
async uploadFileList() {},
handleStorage(value) {
let size = "";
if (value / Math.pow(1024, 3) > 1024) {
size = (value / Math.pow(1024, 4)).toFixed(2) + " TB";
} else if (value / Math.pow(1024, 2) > 1024) {
size = (value / Math.pow(1024, 3)).toFixed(2) + " GB";
} else if (value / 1024 > 1024) {
size = (value / Math.pow(1024, 2)).toFixed(2) + " MB";
} else if (value > 1024) {
size = (value / 1024).toFixed(2) + " KB";
} else {
size = value + " B";
}
return size;
},
},
};
</script>
<style lang="scss" scoped>
.upload_demo {
width: 600px;
margin: 100px auto;
}
.flex_center {
display: flex;
align-items: center;
justify-content: center;
}
.el-upload__text {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #999999;
}
.table_info {
display: flex;
justify-content: space-between;
align-items: center;
.info {
font-size: 12px;
color: #999999;
& span:first-child {
margin-right: 10px;
}
}
}
.el-icon-upload {
font-size: 19px;
margin: 0;
}
.el-upload__text:first-child {
margin-top: 40px;
}
.addFiles {
color: #337dff;
}
.drag {
width: 100%;
height: 240px;
margin-top: 10px;
border: 2px dashed #edeff3;
}
.tableBox {
height: 100%;
min-height: 240px;
}
.drag_border {
border: 2px dashed #dfe1e5;
}
.el-upload__text:first-child {
margin-top: 80px;
}
</style>
后记
建议拖拽文件后，读取过程中触发loading 后，再次拖拽文件读取，此时注意loading状态。可以记录拖拽次数。比如拖拽第一为1。然后这个文件读取过程中，用户又拖拽了文件进来，此时+1。文件读取完成后就减一。最终这个读取次数为0时 loading 才为false。这个这个loading 读取状态时可掌控的。
拖拽上传中文件有大有小，大的需要切片，小的直接上传，所以计算md5 也是比较重要的。因为md5如果后端有记录的话，说明文件已经上传过，直接标记成功，这就是所谓的秒传。
断点续传也一样，就是计算的MD5传给后端后，后端返回md5的碎片列表hash，把没传的碎片传过去，传过的碎片标记为成功，然后合并碎片。因为我这边是云对象存储，业务上不追求md5实现断点续传妙传，只要求切片上传。所以我觉得是这一个不完美点。后面我会写个小作文去断点续传，秒传这一块逻辑
上传接口如果一样的话浏览器允许同时链接个数为4-8个，这个是因为浏览器而异。也就是说如果同时调用20个上传接口的话，会有12个接口被浏览器挂起。所以控制上传接口个数也是一个计算活唷。我这边的实现是如果有切片和文件一起上传那么切片最大允许2个接口同时上传，文件允许4个同时上传。如果只有切片或者文件就只允许6个同时上传。
