北京网站建设公司网络营销外包网络建站报价百度下载官方下载安装

分久必合，合久必分

优势部分：减少了内存占用，可实现断点续传，并发处理，利用带宽，提高效率
不足之处：增加复杂性，增加额外计算存储
应用场景：云存储大文件上传、多媒体平台音视频上传，需断点续传应用
注意事项:：理分块大小，顺序的完整性，异常情况的合理处理

示例：

前端：

<input type="file" id="fileInput"/>
<button onClick={upload()}>上传文件
</button>

<script>async function upload(){const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const chunkSize = 1 * 1024 * 1024; // 设置每个分片的大小为1MBconst totalChunks = Math.ceil(file.size / chunkSize); // 计算文件总分片数let currentChunk = 0; // 当前处理的分片索引while (currentChunk < totalChunks) {const start = currentChunk * chunkSize; //计算当前块的起始位置const end = Math.min(start + chunkSize, file.size); //计算当前块的结束位置const chunk = file.slice(start, end);  //切割文件为当前块const formData = new FormData();formData.append('file', chunk); //添加当前块到FormData对象formData.append('filename', file.name); //添加文件名到FormData对象formData.append('totalChunks', totalChunks); //添加总块数到FormData对象formData.append('currentChunk', currentChunk); //添加当前块数到FormData对象try{await axios.post('http://localhost:3000/upload',formData,{headers:{'Content-Type':'multipart/form-data',},}); //发送当前块的上传请求}catch(error){console.error(error);return;}currentChunk++; //增加当前块数，继续下一块的上传}try{const postData = { filename:file.name,totalChunks:totalChunks }; //构造合并请求的数据await http.post('http://localhost:3000/merge', postData,{headers: {'Content-Type': 'application/json'}}); //发送合并请求}catch(error){console.error(error);}}
</script>

写完之后执行，就会看到，当我们进行上传时，会不断的像服务器发送请求

后端： 

后端使用：path解决路径问题  fs文件的读写操作  引入第三方类库multer进行文件上传的操作处理 设置一个上传地址upload   bodyParser利用它来实现body的解析操作

const express = require('express');
const cors = require('cors');
const path = require('path');
const fs = require('fs');
const multer = require('multer');
const upload = multer({dest:'uploads/'});
const bodyParser = require('body-parser');
const app = express();app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));app.post('/upload',(req,res) => {});app.listen(3000,() => {console.log('Server started on port 3000');
});

上传upload接口：

app.post('/upload',upload.single('file'),(req,res) => {const file = req.file; // 获取上传的文件对象const filename = req.body.filename; // 获取文件名const totalChunks = parseInt(req.body.totalChunks); // 获取总块数const currentChunk = parseInt(req.body.currentChunk); //获取当前块数const chunkPath = path.join("uploads/",`${filename}-chunk-${currentChunk}`); //生成当前存储路径const chunkStream = fs.createReadStream(file.path); //创建读取文件块的可读流const writeStream = fs.createWriteStream(chunkPath); //创建写入当前块的可写流chunkStream.pipe(writeStream); //将读取的文件块内容通过管道写入当前块的文件chunkStream.on("end", () => {fs.unlinkSync(file.path); //读取文件块的流结束后，删除临时文件res.sendStatus(200); //响应上传成功的状态});
});

切片传递完毕之后，我们要进行merge合并的一个请求操作。

merge合并接口：

router.post("/merge", (req, res) => {const filename = req.body.filename; //获取文件名const totalChunks = parseInt(req.body.totalChunks);  //获取总块数const mergedPath = path.join("uploads", filename); //生成合并后文件的存储路径const writeStream = fs.createWriteStream(mergedPath); //创建写入合并后文件的可写流const mergeChunks = (index) => {if (index === totalChunks) {writeStream.end(); //所有块都合并完成后，关闭写入流res.sendStatus(200); //响应合并成功的状态return;}const chunkPath = path.join("uploads", `${filename}-chunk-${index}`); //获取当前块的存储路径const chunk = fs.readFileSync(chunkPath); //同步读取当前块的内容fs.unlinkSync(chunkPath); //删除已合并的块文件writeStream.write(chunk,() => {mergeChunks(index + 1); //递归合并下一块});};mergeChunks(0); //从第一块开始合并
});

那么这时当我上传文件时，我们可以看到有大量的视频文件，当请求完毕后，会合并成一个文件

那么此时我们就已经实现了大文件上传的效果，利用分久必合，合久必分原则，前端进行了块级的分割，像服务器端不断的发送块级文件内容，以便实现服务器端的分久必合操作。操作之后，执行merge请求，利用merge对分久必合以后的内容进行请求操作，最终形成的是一个完整的上传文件的内容。

以上就是此内容，希望对您有所帮助。