文件上传之大文件分块上传

分久必合，合久必分

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

示例：

前端：

<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; // 设置每个分片的大小为1MB
        const 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对分久必合以后的内容进行请求操作，最终形成的是一个完整的上传文件的内容。

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