大文件上传实现

分片上传

  1. 将大文件分割成多个小片(chunk),逐个上传。
  2. 每个片上传成功后,服务器可以返回确认信息。
  3. 所有片上传完成后,服务器端将这些片重新组合成原始文件。

以下是一个简单的分片上传的前端实现示例:

javascript 复制代码
function uploadFile(file) {
    const CHUNK_SIZE = 1 * 1024 * 1024; // 1MB
    let currentChunk = 0;
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);

    function uploadChunk() {
        const start = currentChunk * CHUNK_SIZE;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const chunk = file.slice(start, end);

        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('fileName', file.name);
        formData.append('chunkIndex', currentChunk);
        formData.append('totalChunks', totalChunks);

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                currentChunk++;
                if (currentChunk < totalChunks) {
                    uploadChunk(); // 递归上传下一片
                } else {
                    console.log('上传完成');
                }
            } else {
                console.error('上传失败', data.message);
            }
        })
        .catch(error => {
            console.error('上传错误', error);
        });
    }

    uploadChunk();
}

在服务器端,你需要处理接收到的片,存储这些片,并在所有片都上传完成后将它们合并。具体的服务器端实现取决于你使用的后端技术栈。

相关推荐
秋99 小时前
java项目中cpu飙升排查及解决方法
java·开发语言
野生技术架构师9 小时前
牛客网2026最新大厂Java高频面试题精选(附标准答案)
java·开发语言
PH = 79 小时前
JAVA的SPI机制
java·开发语言
IT猿手9 小时前
多目标优化算法:多目标蛇优化算法(Multiple Objective Snake Optimizer,MOSO)(提供MATLAB代码)
开发语言·算法·matlab·动态路径规划·光伏模型参数估计
朔北之忘 Clancy9 小时前
2026 年 3 月青少年软编等考 C/C++ 一级真题解析
c语言·开发语言·c++·青少年编程·题解·考级
不好听6139 小时前
JavaScript 到底是怎么运行的?从编译阶段到执行上下文全面解析
javascript
小成202303202659 小时前
C++~01面向对象基础
开发语言·c++
会编程的土豆9 小时前
Go 方法接收者超清晰笔记(类型名 vs 变量名)
开发语言·笔记·golang
丷丩9 小时前
MapLibre GL JS第29课:添加Canvas源
javascript·gis·map·mapbox·maplibre gl js
utf8mb4安全女神9 小时前
【rsyslog服务】把所有服务的“临界点”以上的错误都保存在/var/log/alert.log⽇志中
java·前端·javascript