WebUploader - 分片上传

关注

转载最新推荐文章于 2026-04-14 09:54:55 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

WebUploader之前端大文件分片上传 WebUploader之单个大文件分片上传（前端实现） 1、组件简介 webuploader（官方定义）：是一个以 HTML5 为主， Flash为辅的文件上传组件，采用大文件分片/并发上传的方式，极大地提高了文件上传的效率，同时兼容多种浏览器版本；链接： WebUploader官网. 2、前端代码实现首先，下载组件，并引入到项目文件； import WebUploader from "web... 阅读详情

在开发过程中遇到需要上传大文件的需求，但是大文件整个上传会导致服务器内存爆炸。

分片上传的思路

利用blob.slice()方法，根据指定的分片大小对文件进行切割，然后对切割得到的分片分开上传，上传可以指定并发数。服务器接受到所有分片之后，在把所有分片按照正确的顺序合并成完整的文件。

实现

由于实现过程中，后端开发懒得去判断分片是否全部上传完毕，需要前端在分片全部上传完之后在发送一个请求通知后台合并分片。并且webupload对image 类型的文件不分片。最后封装webuploader实现如下：

function upload(file, options) {
    // default options
    options = $.extend({
        folder: '',
        success: $.noop,
        error: $.noop,
        progress: $.noop
    }, options);

    var errorHandler = options.error;
    var successHandler = options.success;
    var progressHanlder = options.progress;
    var fileMd5 = uuidv4();
    var runtimeForRuid = new WebUploader.Runtime.Runtime();
    var wuFile = new WebUploader.File(new WebUploader.Lib.File(WebUploader.guid('rt_'), file));
    var chunkSize = 1 * 1024 * 1024;
    var chunked = file.size > chunkSize;
    // 
    var events = $.extend({
        uploadBeforeSend: function(_, data) {
            if (chunked) {
                data.uuid = fileMd5;
            }
        },
        uploadProgress: progressHanlder
    }, file.type.indexOf('image') >= 0 || !chunked ? {
        uploadSuccess: function(_, data) {
            successHandler(data);
        },
        uploadError: function() {
            errorHandler('上传失败');
        }
    } : {
        uploadFinished: function() {
            var file = uploader.getFiles()[0];
            if (!file || file.type.indexOf('image') >= 0) {
                return;
            }

            $.post('/public/stream-file/', {
                csrf_token: bms.csrf_token,
                chunk: -1,
                uuid: fileMd5,
                upload_folder: options.folder,
                name: file.name
            }, null, 'json').done(successHandler).fail(function() {
                errorHandler('上传失败');
            });
        }
    });
    
    var uploader = WebUploader.create({
        fileNumLimit: 1,
        chunked: chunked,
        chunkSize: chunkSize,
        prepareNextFile: true,
        server: '/public/stream-file/',
        fileVal: 'attachement',
        formData: {
            csrf_token: bms.token,
            upload_folder: options.folder
        }
    });

    $.each(events, function(name, handler) {
        uploader.on(name, handler);
    });

    // 开始上传
    uploader.addFiles(wuFile);
    uploader.upload();
    return uploader;
}