<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" onchange="uploadFile(this.files)">
</body>
<script !src="">
// 定义分块大小为2MB
const chunkSize = 2 * 1024 *1024;
let a = 0
// 分块上传
function uploadFile(file) {
file = file[0]
// 初始化分块信息数组
const chunks = [];
// 计算文件总块数
const totalChunks = Math.ceil(file.size / chunkSize);
// 生成唯一标识符
const fileId = uuidv4();
// 分块信息对象
const chunkInfo = {
fileId: fileId,
totalChunks: totalChunks,
fileName: file.name,
fileSize: file.size,
chunks: [],
};
// 分割文件为块并保存到分块信息对象中
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = (i+1) * chunkSize;
const chunk = file.slice(start, end);
const chunkId = uuidv4();
const chunkData = {
chunkId: chunkId,
fileId: fileId,
index: i,
data: chunk,
};
chunks.push(chunkData);
}
chunkInfo.chunks = chunks;
// 开始上传分块
for (let i = 0; i < totalChunks; i++) {
const chunkData = chunkInfo.chunks[i];
// 构造上传请求
const formData = new FormData();
formData.append('fileId', chunkData.fileId);
formData.append('chunkId', chunkData.chunkId);
formData.append('index', chunkData.index);
formData.append('data', chunkData.data);
for (let [a, b] of formData.entries()) {
console.log(a, b, '--------------');
}
// 发送上传请求
// fetch('/uploadChunk', {
// method: 'POST',
// body: formData
// })
// .then(response => {
// // 处理上传结果
// if (response.status === 200) {
// console.log(`chunk ${chunkData.index} uploaded`);
// } else {
// console.error('upload failed');
// }
// })
// .catch(error => {
// console.error(error);
// });
}
}
function uuidv4(){
return a += 1
}
</script>
</html>
断点续传js
于 2023-05-06 18:06:57 首次发布