JS文件断点续传的切割与合并

news2024/12/23 13:25:05

总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块），但这不是我们现在说的重点，我们要做的事是保证在网络中断后1G的文件已上传的那部分在下次网络连接时不必再重传。所以我们本地在上传的时候，要将大文件进行分片，
比如分成1024*1024B，即将大文件分成1M的片进行上传，服务器在接收后，再将这些片合并成原始文件，这就是分片的基本原理。断点续传要求本地要记录每一片的上传的状态，我通过三个状态进行了标记（wait loading finish），当网络中断，再次连接后，从断点处进行上传。服务器通过文件名、总片数判断该文件是否已全部上传完成。

所以我们先要将文件进行切割成多个文件，这里只是切割与合并

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <input type="file" id="filel"><button id="btn1">拆分</button>
    </div>
    <div>
        <input type="file" multiple id="file2"><button id="btn2">合并</button>
    </div>

</body>
<script>
    const loadingEl = document.getElementById('loading')
    document.getElementById('btn1').onclick = () => {
        const files = document.getElementById('filel').files
        const file = files[0]
        // 切成多大一份
        const uploadSize = 1024 * 1024 * 50
        const arr = []
        for (let i = 0; i < file.size; i += uploadSize) {
            const index = parseInt(i / uploadSize) + 1
            // 文件切片  截取返回的是一个二进制文件
            arr.push(file.slice(i, uploadSize * index))

        }
        console.log('文件切片', arr)
        downloadFiles(arr, file.name)

    }
    document.getElementById('btn2').onclick = () => {
        const files = documentgetElementById('file2').files// 切片合并
        const arr = [...files].map(v => {
            return v.slice(0, v.size)
        })
        const name = files[0].name.replace(/-\d+$/, '')
        const file = new File(arr, name)
        console.log('切片合并', file)
        downloadFile(file, file.name)
    }

    function downloadFiles(arr, name) {
        arr.forEach((v, i) => {
            downloadFile(v, name + '-' + i)
        })
    }
    function downloadFile(v, name) {
        const a = document.createElement('a')
        a.setAttribute('download', name)
        a.href = URL.createObjectURL(v)
        a.click()
    }
</script>

</html>