Resuma los problemas de la carga de fragmentos de archivos grandes y la carga de reanudación de punto de interrupción. Debido a que el archivo es demasiado grande (por ejemplo, más de 1G), se debe considerar la situación de interrupción de la red durante el proceso de carga. La solicitud de red http en sí ya tiene la función de cargar en partes. Cuando el archivo transmitido es relativamente grande, el protocolo http cortará (bloqueará) automáticamente el archivo, pero este no es el enfoque de lo que estamos hablando ahora. lo que tiene que hacer es Se garantiza que la parte del archivo 1G que se cargó después de la interrupción de la red no necesita ser retransmitida la próxima vez que se conecte la red. Por lo tanto, cuando cargamos localmente, necesitamos dividir el archivo grande en partes,
como 1024*1024B, es decir, dividir el archivo grande en partes de 1M para cargar, y después de que el servidor las reciba, combine estas partes en el archivo original. .principios básicos. La reanudación del punto de interrupción requiere que el local registre el estado de carga de cada pieza. Lo marqué con tres estados (esperar a que termine la carga). Cuando la red se interrumpe, después de volver a conectar, cargue desde el punto de interrupción. El servidor juzga si el archivo se ha cargado por completo a través del nombre del archivo y el número total de piezas.
Entonces, primero debemos cortar el archivo en varios archivos, aquí solo está cortando y fusionando
<!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>