大文件上传实现

分片上传

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

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

相关推荐
煸橙干儿~~3 分钟前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒5 分钟前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od
我是陈泽8 分钟前
一行 Python 代码能实现什么丧心病狂的功能?圣诞树源代码
开发语言·python·程序员·编程·python教程·python学习·python教学
安冬的码畜日常12 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
优雅的小武先生19 分钟前
QT中的按钮控件和comboBox控件和spinBox控件无法点击的bug
开发语言·qt·bug
虽千万人 吾往矣25 分钟前
golang gorm
开发语言·数据库·后端·tcp/ip·golang
创作小达人27 分钟前
家政服务|基于springBoot的家政服务平台设计与实现(附项目源码+论文+数据库)
开发语言·python
郭二哈30 分钟前
C++——list
开发语言·c++·list
杨荧31 分钟前
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
java·开发语言·vue.js·spring boot·spring cloud·开源
ZPC821037 分钟前
Python使用matplotlib绘制图形大全(曲线图、条形图、饼图等)
开发语言·python·matplotlib