上传大文件分片是一种常见的上传方式，可以有效地避免上传过程中出现网络中断等问题导致的上传失败。下面是一个使用原生JS实现上传大文件分片的示例代码：
javascript
// 定义上传文件的分片大小
const CHUNK_SIZE = 1024 * 1024; // 1MB
// 获取文件的MD5值
function getFileMD5(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const spark = new SparkMD5.ArrayBuffer();
spark.append(reader.result);
const md5 = spark.end();
resolve(md5);
};
reader.onerror = reject;
reader.readAsArrayBuffer(file);
});
}
// 分片上传文件
async function uploadFile(file) {
const fileSize = file.size;
const fileMD5 = await getFileMD5(file);
const totalChunks = Math.ceil(fileSize / CHUNK_SIZE);
let uploadedChunks = 0;
let uploadedSize = 0;
while (uploadedChunks < totalChunks) {
const start = uploadedChunks * CHUNK_SIZE;
const end = Math.min(start + CHUNK_SIZE, fileSize);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('file', chunk);
formData.append('fileMD5', fileMD5);
formData.append('chunkIndex', uploadedChunks);
formData.append('totalChunks', totalChunks);
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
const result = await response.json();
if (result.success) {
uploadedChunks++;
uploadedSize += chunk.size;
const progress = Math.floor((uploadedSize / fileSize) * 100);
console.log(`Uploaded ${progress}%`);
} else {
console.error(result.message);
}
}
console.log('Upload complete!');
}
上述代码中，我们首先定义了上传文件的分片大小为1MB，然后使用SparkMD5库计算文件的MD5值。接着，我们根据文件大小和分片大小计算出需要上传的总分片数，并在循环中逐个上传每个分片。在上传每个分片时，我们使用FormData对象将分片数据和其他参数一起发送到服务器端。上传成功后，我们更新已上传的分片数和已上传的文件大小，并计算上传进度。最后，当所有分片上传完成时，我们输出上传完成的消息。
需要注意的是，上述代码中的上传接口地址为`/upload`，需要根据实际情况进行修改。另外，由于分片上传涉及到文件的MD5值计算和网络请求等操作，因此建议使用异步函数或Promise等方式进行处理，以避免阻塞UI线程。
参考文章：http://blog.ncmem.com/wordpress/2023/11/14/原生js上传大文件分片-2/