前端大文件上传处理方案是一种用于上传大型文件的技术方案。它通常包括将大型文件分成小块，每块大小通常为几兆到几十兆，然后将这些小块逐个上传，最终在服务器上重新组合成原始文件。以下是一些常见的前端大文件上传处理方案：
分片上传：这是一种将大文件分成小块上传的方案。每个分片都由独立的请求上传，可以在上传过程中暂停和恢复。
断点续传：这是一种基于分片上传的方案，它可以在上传过程中捕获上传的状态，以便在上传过程中发生错误或中断时恢复上传。这种方案通常需要在服务器端进行支持。
使用 WebRTC 进行点对点文件传输：这是一种直接将文件上传到另一个设备或浏览器的方案。这种方案可以避免上传到服务器的延迟和带宽限制，但可能会涉及到安全风险。
使用第三方服务：这种方案可以使用云存储服务（例如 Amazon S3、Google Cloud Storage、Microsoft Azure 等）或者其他第三方服务（例如 Dropzone.js、Uppy 等）来处理大文件上传。这种方案通常需要支付服务费用。
流式上传：将文件分成多个流，逐个上传，减小服务器压力和传输时间。
以上方案各有优缺点，需要根据具体场景和需求选择合适的方案，我在这里就只提供一个分片上传代码示例。
<input type="file" id="file-input">
<button onclick="upload()">上传文件</button>
const upperLimitSize = 1024 * 1024 * 50 // 50兆
function upload() {
const fileDom = document.querySelector('#file-input')
// 首先第一步先获取文件对象
const file = fileDom.files[0]
// 判断是否文件大小超过上限，如果没有就直接做上传操作
if (file.size < upperLimitSize) {
// 直接上传文件的操作
console.log('上传成功')
return
}
// 文件切片相关的处理
let currentChunk = 0 // 当前片数
const chunkSize = 1024 * 1024 * 5// 每个切片的大小
const totalChunks = Math.ceil(file.size / chunkSize) // 总共需要切多少片
/**
* @param start 起始
* @param end 结束
* @param chunkIndex 第几个切片
*/
function uploadChunk(start, end, chunkIndex) {
console.log('start, end, chunkIndex: ', start, end, chunkIndex);
console.log(file.slice(start, end), file.size, end) // file.slice(start, end)这是每次需要上传的片段
}
// 切片后分别上传
while (currentChunk < totalChunks) {
let start = currentChunk * chunkSize
let end = Math.min(((currentChunk + 1) * chunkSize), file.size)
uploadChunk(start, end, currentChunk)
currentChunk++
}
}
参考文章：http://blog.ncmem.com/wordpress/2023/10/20/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%a4%84%e7%90%86%e6%96%b9%e6%a1%88/
欢迎入群一起讨论
