Resuma os problemas de upload de fragmentos de arquivos grandes e upload de resumo de ponto de interrupção. Como o arquivo é muito grande (por exemplo, mais de 1G), a situação de interrupção da rede durante o processo de upload deve ser considerada. A própria requisição de rede http já tem a função de upload em pedaços. Quando o arquivo transmitido for relativamente grande, o protocolo http irá fatiar (bloquear) automaticamente o arquivo, mas não é esse o foco do que estamos falando agora. tem a fazer é É garantido que a parte do arquivo 1G que foi carregada após a interrupção da rede não precisa ser retransmitida na próxima vez que a rede for conectada. Portanto, quando fizermos upload localmente, precisamos dividir o arquivo grande em pedaços,
como 1024*1024B, ou seja, dividir o arquivo grande em pedaços de 1M para upload e, após o servidor recebê-los, mesclar esses pedaços no arquivo original .princípios básicos. A retomada do breakpoint exige que o local registre o status de upload de cada peça. Eu marquei com três estados (aguarde o término do carregamento). Quando a rede for interrompida, após a reconexão, faça o upload do breakpoint. O servidor julga se o arquivo foi carregado completamente por meio do nome do arquivo e do número total de peças.
Então, primeiro precisamos cortar o arquivo em vários arquivos, aqui está apenas cortando e mesclando
<!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>