视频的分片上传

分片上传需求分析：

项目中很多地方需要上传视频，如果视频很大，上传到服务器需要很多时间，这个时候体验就会很差。所以需要前端实现分片上传的功能。

要实现分片上传，需要对视频进行分割，分割成不同的大小进行上传，但是在上传的时候后台需要知道文件的唯一标识，进行识别，避免是重复数据上传，这个时候我们可以使用hash对内容进行生成唯一标识。

第一种方法实现：

html文件:

html 复制代码

<input type="file" id="videoFile" accept="video/*" />

javascript 文件：

javascript 复制代码

document.getElementById('uploadBtn').addEventListener('click', async () => {
    const fileInput = document.getElementById('videoFile');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('请选择一个文件');
        return;
    }

    const chunkSize = 5 * 1024 * 1024; // 每个分片的大小，例如 5MB
    //分析存在几个分片，假如文件是10M ，那就是两个分片。
    const totalChunks = Math.ceil(file.size / chunkSize);
    //唯一id，这个是必须的，用来区分不同的分片
    const fileId = Date.now().toString(); // 生成一个唯一的文件ID
	
	//遍历分片，去分别上传到服务器
    for (let chunkNumber = 0; chunkNumber < totalChunks; chunkNumber++) {
        const start = chunkNumber * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);
		
		//处理数据给后端需要的格式
        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('fileId', fileId);
        formData.append('chunkNumber', chunkNumber);
        formData.append('totalChunks', totalChunks);
        formData.append('fileName', file.name);

        try {
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData,
            });

            if (!response.ok) {
                throw new Error('上传失败');
            }

            console.log(`分片 ${chunkNumber + 1}/${totalChunks} 上传成功`);
        } catch (error) {
            console.error('上传出错:', error);
            break;
        }
    }

    console.log('所有分片上传完成');
});

分析一下上面的formData:

更多的数据格式参考文章：点击跳转

服务端处理：

服务器端需要处理每个分片的上传请求，并在所有分片上传完成后将其合并。

接受分片：

服务器端可以使用类似以下的代码来接收分片：

javascript 复制代码

app.post('/upload', (req, res) => {
    const { fileId, chunkNumber, totalChunks, fileName } = req.body;
    const chunk = req.files.file;

    // 保存分片到临时目录
    const chunkPath = `./temp/${fileId}-${chunkNumber}`;
    fs.writeFileSync(chunkPath, chunk.data);

    res.send({ success: true });
});

合并分片：

当所有分片上传完成后，服务器端可以将它们合并成一个完整的文件：

javascript 复制代码

app.post('/merge', (req, res) => {
    const { fileId, totalChunks, fileName } = req.body;

    const outputPath = `./uploads/${fileName}`;
    const writeStream = fs.createWriteStream(outputPath);

    for (let i = 0; i < totalChunks; i++) {
        const chunkPath = `./temp/${fileId}-${i}`;
        const chunk = fs.readFileSync(chunkPath);
        writeStream.write(chunk);
        fs.unlinkSync(chunkPath); // 删除临时分片
    }

    writeStream.end();
    res.send({ success: true });
});

前端通知服务器合并分片

在所有分片上传完成后，前端可以发送一个请求通知服务器合并分片：

javascript 复制代码

fetch('/merge', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        fileId: fileId,
        totalChunks: totalChunks,
        fileName: file.name,
    }),
});

第二种具体实现：

这个地方使用hash （spark-md5 第三方依赖）生成唯一标识，这个方式只对前端分片进行了封装，可以结合上面的代码传递给后端。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频分片上传</title>

</head>

<body>
    <input type="file" id="file"/>
    <script src="../node_modules/spark-md5/spark-md5.js"></script>

<script>
    const inp = document.querySelector('#file');
    inp.onchange = async () => {
        const file = inp.files[0];
        if(!file){
            alert("文件不存在！");
        }
       const chunks = createChunks(file,10*1024*1024);
        console.log(chunks);
        const result = await hash(chunks);
        console.log(result);
    }
	
	//生成hash
    function hash(chunks){
       return new Promise((resolve, reject) => {
           const spark = new SparkMD5();
           function _read(i){
               if(i>=chunks.length){
                   resolve(spark.end());
                   return;
               }
               const blob = chunks[i];
               const reader = new FileReader();
               reader.onload = function(e){
                   const bytes = e.target.result;//读取到的字节数组
                   spark.append(bytes);
                   _read(i+1)
               }
               reader.readAsText(blob);
           }
           _read(0);
       })
    }

    function createChunks(file,chunkSize){
        const result = [];
        for (let i = 0; i < file.size; i+=chunkSize) {
            result.push(file.slice(i,i+chunkSize));
        }
        return result;
    }
</script>

</body>
</html>