大文件上传实现

分片上传

  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();
}

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

相关推荐
枫叶梨花19 分钟前
使用Go语言获取Windows系统信息:从CPU到电池的全维度监控
开发语言·windows·golang
C_Liu_23 分钟前
从C语言到C++:拥抱面向对象编程的全新世界
c语言·开发语言·c++
哈基咩27 分钟前
Go 语言模糊测试 (Fuzz Testing) 深度解析与实践
开发语言·后端·golang
元气少女小圆丶28 分钟前
Mirror学习笔记
java·开发语言·学习
lly20240630 分钟前
Perl 面向对象编程深入解析
开发语言
瓦特what?36 分钟前
C + +
c语言·开发语言·c++·经验分享·笔记·算法·程序员创富
@十八子德月生37 分钟前
第三阶段—8天Python从入门到精通【itheima】-143节(pyspark实战——数据计算——flatmap方法)
大数据·开发语言·python·数据分析·pyspark·好好学习,天天向上·question answer
沐知全栈开发1 小时前
C# 运算符重载
开发语言
前端开发爱好者1 小时前
尤雨溪官宣:Vite 历史性的一刻!超越 Webpack!
前端·javascript·vite
天机️灵韵1 小时前
开源医院信息管理系统:基于若依框架的智慧医疗解决方案
java·开发语言·spring boot·spring cloud·github·开源项目