分片上传
分片上传是将大文件分成多个小文件进行上传，每个小文件的大小通常为1MB到10MB。上传时，将每个小文件分别上传到服务器，服务器再将这些小文件合并成一个完整的大文件。这种方法可以提高上传速度，减少上传失败的可能性。
断点续传
断点续传是指在上传过程中，如果上传失败或者中断了，可以从上次上传的位置继续上传。这种方法可以避免上传失败后需要重新上传整个文件的问题，节省时间和带宽。
<script>
const inp = document.querySelector('input[type="file"]')
inp.onchange = async (e) => {
const file = inp.files[0]
if (!file) {
return
}
const chunks = createChunks(file, 10 * 1024 * 1024) //10M
const hash = await fileHash(chunks)
upload(chunks, hash)
}
// 计算文件哈希值 使用第三方库SparkMD5
function fileHash(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 = (e) => {
const bytes = e.target.result // 读取到的字节数
spark.append(bytes)
_read(i + 1)
}
reader.readAsArrayBuffer(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
}
// 上传
function upload(chunks, hash) {
function uploadFile(index) {
const xhr = new XMLHttpRequest()
xhr.open('POST', '/upload', true)
xhr.setRequestHeader('Content-Type', 'application/octet-stream')
xhr.setRequestHeader('X-File-Hash', hash)
xhr.setRequestHeader('X-File-Index', index)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 文件上传完成
// 拿到回调看服务端是第几个分片
// 判断是否需要继续传 剩余分片
// 需要递归调用uploadFile()
// 完成调用合成接口通知后端merge(); 上传完成 合成文件
}
}
xhr.send(chunks[index])
}
uploadFile(0)
}
</script>参考文章：http://blog.ncmem.com/wordpress/2023/09/21/前端大文件分片上传断点续传/
