前端实现大文件的分片上传（含代码）

回答：

将代码就行分片，具体的实现为利用file对象的slice方法将文件进行分片，并且分片成Blob格式，上传完成之后在去组合分片就好了

代码：

// HTML部分
<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>
<div id="progress"></div>

// JavaScript部分
const chunkSize = 1 * 1024 * 1024; // 每个分片的大小，这里设置为1MB
let file;
let start = 0;
let end = chunkSize;

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    file = fileInput.files[0];
    const totalChunks = Math.ceil(file.size / chunkSize);
    const url = 'https://example.com/upload';

    uploadChunk(file, totalChunks, url);
}

function uploadChunk(file, totalChunks, url) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);

    xhr.upload.onprogress = function (e) {
        const percent = ((start / file.size) * 100).toFixed(2);
        document.getElementById('progress').innerHTML = `Upload progress: ${percent}%`;
    };

    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log('Chunk uploaded successfully');
            start = end;
            end = Math.min(start + chunkSize, file.size);

            if (start < file.size) {
                uploadChunk(file, totalChunks, url); // 递归调用上传下一个分片
            } else {
                console.log('File uploaded successfully');
            }
        } else {
            console.error('Chunk upload failed');
        }
    };

    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('totalChunks', totalChunks);
    formData.append('currentChunk', Math.ceil(end / chunkSize));
    xhr.send(formData);
}

解释：

1. formData 被用来构建要发送给服务器的数据。它是一个 FormData 对象，用于将表单数据构建为键值对的形式，以便在HTTP请求中传输数据。 formData.append() 方法用于向 FormData 实例中添加新的键值对数据。

2. xhr.onload 函数是一个回调函数，当XMLHttpRequest完成时会被执行。它会在从服务器接收到响应后触发。 因此会先执行后面的代码，当xhr.send(formData)完成之后才会触发回调函数。