如何基于js管理大文件上传及断点续传详析

如何基于JS管理大文件上传及断点续传是一个比较庞杂的话题，需要分多个方面进行分析和探讨。以下是一个基本的攻略。

1. 了解大文件上传的基本概念

在进行大文件上传前，必须要了解一些基本概念，例如分片上传、断点续传、上传速度控制等。可以参考一些知名的开源库或者API，例如：
- WebUploader：京东前端开源的大文件上传组件，支持分片上传、断点续传等功能。
- Resumable.js：一款轻量级的实现了断点续传功能的JavaScript库。
- Uppy：一款现代化的多用途JavaScript文件上传工具，支持分片上传、断点续传、速度控制等。

了解这些基础知识和技术之后，才能更好地进行大文件上传的管理和控制。

2. 实现基础的大文件上传

接下来就可以开始实现基础的大文件上传功能了。需要注意以下几个方面：
- 需要选择合适的后端技术，例如PHP、Node.js等。
- 需要选择一个好用的前端上传组件或者自己实现，可以使用WebUploader等组件。
- 需要注意上传文件的大小限制、上传进度的显示等问题。

以下是一个基本的大文件上传示例，使用了WebUploader组件：

<!-- 引入 Webuploader CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css"/>

<!-- 引入 jQuery 和 Webuploader JS 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>

<!-- HTML 代码 -->
<div id="uploader">
    <div class="webuploader-container">
        <div class="webuploader-pick">选择文件</div>
    </div>
</div>

<!-- JS 代码 -->
<script>
    // 初始化 WebUploader
    var uploader = WebUploader.create({
        server: 'upload.php',  // 上传接口地址
        pick: '#uploader .webuploader-pick',  // 选择文件按钮
        resize: false,
        chunked: true,  // 开启分片上传
        chunkSize: 5 * 1024 * 1024,  // 每片大小，5MB
        chunkRetry: 3,  // 上传失败后重试次数
        threads: 1,  // 上传并发数
        formData: {
            // 可以在这里添加额外的文件上传参数
        },
        fileVal: 'file',  // 文件字段名称
        accept: {
            // 限制选择的文件类型
        }
    });

    // 监听上传事件
    uploader.on('uploadStart', function (file) {
        // 开始上传时触发
    });

    uploader.on('uploadProgress', function (file, percentage) {
        // 上传进度变化时触发
    });

    uploader.on('uploadSuccess', function (file, response) {
        // 上传成功时触发
    });

    uploader.on('uploadError', function (file, reason) {
        // 上传失败时触发
    });

    uploader.on('uploadComplete', function (file) {
        // 上传完成时触发
    });
</script>

3. 实现断点续传的功能

实现断点续传的功能比起基础的大文件上传，需要考虑的更多，例如上传文件的分片、保存上传进度、从上次上传的进度开始上传等等。以下是一个简单的断点续传示例，仅供参考：

<!-- HTML 代码 -->
<div id="uploader">
    <div class="webuploader-container">
        <div class="webuploader-pick">选择文件</div>
    </div>
    <div class="upload-stat">上传进度：<span class="stat-percentage">0%</span></div>
    <button class="upload-pause">暂停上传</button>
</div>

<!-- JavaScript 代码 -->
<script>
    // 初始化 WebUploader
    var uploader = WebUploader.create({
        server: 'upload.php',
        pick: '#uploader .webuploader-pick',
        resize: false,
        chunked: true,
        chunkSize: 5 * 1024 * 1024,
        chunkRetry: 3,
        threads: 1,
        formData: {},
        fileVal: 'file',
        accept: {}
    });

    // 开始上传时，从上次上传的位置开始继续上传
    uploader.on('uploadBeforeSend', function (block, data) {
        var file = block.file;
        var chunkIndex = block.chunk;
        var chunkSize = uploader.options.chunkSize;
        var uploadedBytes = chunkIndex * chunkSize;

        data['chunkIndex'] = chunkIndex;
        data['chunkSize'] = chunkSize;
        data['uploadedBytes'] = uploadedBytes;
        data['totalSize'] = file.size;
        data['md5'] = file.md5;

        block.blob = file.source.slice(uploadedBytes, uploadedBytes + chunkSize);

        // 跳过已经上传的分片
        if (uploadedBytes >= file.size) {
            return false;
        }
    });

    // 显示上传进度
    uploader.on('uploadProgress', function (file, percentage) {
        $('.stat-percentage').text(percentage + '%');
    });

    // 上传出错时，重新上传当前分片
    uploader.on('uploadError', function (block, reason) {
        if (block.retries > uploader.options.chunkRetry) {
            // 重试次数超过配置的上限，停止上传
            uploader.trigger('uploadError', file);
            return;
        }

        block.file.blocks[block.chunk].tries = block.file.blocks[block.chunk].tries || 0;

        if (block.file.blocks[block.chunk].tries < 3) {
            block.file.blocks[block.chunk].tries += 1;
            setTimeout(function () {
                uploader.retry(block);
            }, 2000);
        } else {
            uploader.trigger('uploadError', file);
        }
    });

    // 所有分片上传完成时，调用上传完成的回调
    uploader.on('uploadFinished', function () {
        // TODO: 所有分片上传完成时的回调操作
    });

    // 暂停上传
    $('.upload-pause').on('click', function () {
        uploader.stop();
    });
</script>

以上是一个简单的断点续传示例，具体实现还需要根据自己的项目需求进行优化和修改。

4. 总结

以上是一个大文件上传及断点续传详细攻略的基础内容，在实际开发中需要根据具体情况进行调整和优化。另外，在实现大文件上传时，为了保证上传的效率和质量，还需要注意以下几个方面：

• 涉及到文件上传的服务端组件部署：上传文件的大小、上传请求的超时时间、上传线程的数量限制等参数都需要合理配置
• 分片大小的设置：过小会频繁请求服务端接口，扩大了上传的请求和资源消耗，过大会加大文件分片传输重传时，存在失败的风险
• 上传速度的控制：控制上传速度不仅有利于保护服务端带宽、避免阻塞网络，还能提高用户体验效果等等。