切片上传定义
文件切片上传，也称为分片上传，是一种处理大文件上传的有效方法。该方法通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件
背景与需求
在Web开发中，上传大文件时常常会遇到各种问题，如连接超时、网络中断等，这些都可能导致上传失败。为了提升大文件上传的效率和成功率，文件切片上传技术应运而生。通过将大文件分割成多个小切片进行上传，可以有效减少单次上传的数据量，降低上传失败的风险，并提高上传速度。
工作原理
前端将用户上传的文件按照设定大小进行切片，每一个切片都会发送一次切片请求，等所有的切片请求都完成之后，再执行一次切换合并的请求，将各个切片进行拼接存储。
可拓展
1、切片的顺序可能是乱序的，需要在发送切片请求之前，先按照特定的规则进行排序，特定规则可以是从自定义的切片文件名入手
2、前端可以对切片上传进行监听，当某个切片上传失败时，需要触发重试机制上传该切片，可以设置重试次数或者重试时间间隔
优点与应用场景
提升上传效率：通过并行上传多个切片，可以显著提高大文件的上传速度
降低上传失败风险：即使某个切片上传失败，也只需要重新上传该切片，而不需要重新上传整个文件
支持断点续传：结合前端记录的上传进度和状态信息，可以实现断点续传功能，即在网络中断后可以从上次中断的位置继续上传
效果
启动本地服务器
发送请求
切片数据
最终合并的数据
代码
<body></body>
<input type="file" id="file">
</body>
<script>
const file = document.getElementById('file');
file.addEventListener('change', (event)=>{
const fileInfo = event.target.files[0]; // 获取文件信息
console.log(fileInfo, 'fileInfo')
const chunks = chunkFun(fileInfo) // 获取切片数组
uploadFile(chunks, fileInfo.name) // 上传切片
})
const chunkFun = (fileInfo, size = 1024 * 1024 * 4) => { // size-自定义切片大小，这里是4M
const chunks = [];
for(let i=0; i<fileInfo.size; i+=size){
chunks.push(fileInfo.slice(i, i + size))
}
return chunks
}
const uploadFile = (chunks, fileName) =>{
const List = [];
for(let i=0; i<chunks.length; i++){
const formData = new FormData();
formData.append('index', i);
formData.append('total', chunks.length);
formData.append('fileName', 'cheney');
formData.append('file', chunks[i]);
// 将每一个分片的fetch存在List数组中
List.push(fetch('http://127.0.0.1:8080/up', {
method: 'POST',
body: formData
}))
}
// 通过promise.all 并发发送请求
Promise.all(List).then(res=>{
fetch('http://127.0.0.1:8080/merge', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
fileName: fileName
})
}).then(res=>{
console.log(res)
})
})
}
</script>node.js
// import express from 'express'
// import multer from 'multer'
// import cors from 'cors'
// import fs from 'node:fs'
// import path from 'node:path'
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const fs = require('fs');
const path = require('path');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'chunk/uploads/') // 分片存储目录
},
filename: (req, file, cb) => {
cb(null, `${req.body.index}-${req.body.fileName}`) // 分片文件名
}
})
const upload = multer({ storage })
const app = express()
app.use(cors())
app.use(express.json())
app.post('/up', upload.single('file'), (req, res) => {
res.send('ok')
})
app.post('/merge', async (req, res) => {
const uploadPath = './chunk/uploads'
let files = fs.readdirSync(path.join(process.cwd(), uploadPath)) // 获取所有的分片数据
files = files.sort((a, b) => a.split('-')[0] - b.split('-')[0]) // 将分片按照文件名进行排序
const writePath = path.join(process.cwd(), uploadPath, `${req.body.fileName}`) // 生成新的文件路径
files.forEach((item) => {
fs.appendFileSync(writePath, fs.readFileSync(path.join(process.cwd(), uploadPath, item))) // 读取分片信息，追加到新文件路径尾部
fs.unlinkSync(path.join(process.cwd(), uploadPath, item)) // 将读取过的分片进行删除
})
res.send('ok')
})
app.listen(8080, () => {
console.log('Server is running on port 8080')
})
