高等JS之大文件分片上传

HTML

    <!-- 大文件分片上传 -->
    <input type="file" id="fileInput">
    <button onclick="upload()">上传</button>

JS

const upload = () => {
    // 获取input元素
    const fileInput = document.getElementById('fileInput');
    // 拿到file对象
    const file = fileInput.files[0]
    console.log(file);
    // 设置分片大小，每片设置1MB
    const chunkSize = 1024 * 1024 
    // 设置开始值
    const start = 0
    // 设置结束值
    const end = Math.min(chunkSize, file.size)
    // 设置分片指针
    const chunkIndex = 0
    // 开始第一次上传
    uploadChunk()

// 定义上传分片函数
    const uploadChunk = () => {
        // 文件切片
        const chunk = file.silce(start, end)
        // 定义formData,用于文件上传
        const formData = new FormData()
        // 文件切片添加
        formData.append('file', chunk)
        // 切片指针添加
        formData.append('chunkIndex', chunkIndex)
        // 切片总次数添加
        formData.append('totalChunks', Math.ceil(file.size / chunkSize))
        // 实际上传的url
        const uploadURL = '/upload-chunk'
        // 向服务端发送post，响应体为formData
        fetch(upload, {
            method: 'post',
            body: formData
        })
        // 获取请求结果
        .then(res => {
            if (res.ok) {
                return res.json()
            }
            throw new Error('上传失败')
        })
        // 每一次分片上传完成后的执行函数
        .then(data => {
            console.log(data);
            console.log(`第${chunkIndex + 1} 片上传成功`);
            // 分片指针加一
            chunkIndex++
            // 起始值等于第一次的结束值
            start = end
            // 第一次的结束值等于第二次的开始值
            end = Math.min(start + chunkSize, file.size)
            // 如果起始值小于文件size,说明未全部上传,则继续上传
            if(start < file.size) {
                uploadChunk()
            }else {
                console.log('全部上传成功');
            }
        })
    }
}

实现手动分片上传的过程涉及将文件分割成多个部分（chunk），然后逐个上传这些部分。这样做的好处是可以提高上传的稳定性和恢复性，尤其是在网络不稳定或大文件情况下。

下面是一个简单的示例，展示如何使用原生JavaScript手动实现文件分片上传的逻辑。这里我们假设分片大小为1MB，你可以根据需要调整这个大小。