WebUploader - 分片上传

朱雀 2021-07-05 01:12 561阅读 0赞

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

#### 分片上传的思路 ####

利用[`blob.slice()`][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;
    }

[blob.slice]: https://developer.mozilla.org/en-US/docs/Web/API/Blob/slice

发表评论取消回复

表情：

评论列表（有 0 条评论，561人围观）

还没有评论，来说两句吧...

相关阅读

相关使用webuploader上传文件

准备工作：添加需要的文件和页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

末蓝、/ 2022年10月13日 12:52/ 0 赞/ 201 阅读

相关 (三)springMVC WebUploader分片上传

环境：windows 7 网络：本机或局域网架构：基于maven的j2ee springMVC 测试结果：可上传620MB左右的文件，如果更大的文件 —> 提示“

小灰灰/ 2022年09月22日 11:56/ 0 赞/ 143 阅读

相关 (二)asp.net WebUploader 分片上传

环境：见上一章原理：服务器端代码将webuploader分片文件，追加到文件上。结论：1、asp.net做服务器端，单线程条件下（webuploader的threa

我会带着你远行/ 2022年09月22日 11:56/ 0 赞/ 131 阅读

相关 SpringBoot WebUploader大文件分片上传

后端技术：SpringBoot2.x 页面：freemarker webuploader:[http://fex.baidu.com/webuploader/get

r囧r小猫/ 2022年02月17日 04:26/ 0 赞/ 382 阅读

相关 webuploader 图片上传样式美化

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 工具类: [webuploader ][webuploader] 效果上传前:

不念不忘少年蓝@/ 2022年01月17日 12:09/ 0 赞/ 521 阅读

相关百度上传webuploader

一.注意细节 1.不能重复上传问题？根据查看webuploader文档里面有个duplicate属性，是可选的， true为可重复，false为不可重复默认为und

不念不忘少年蓝@/ 2021年09月12日 07:06/ 0 赞/ 489 阅读

相关 webuploader 设置上传数量

function onpost_Echo_ndkh2(serverURL,fileType,pickerID,listName,doneback,type){//上传路

水深无声/ 2021年07月26日 02:01/ 0 赞/ 565 阅读

相关 WebUploader - 分片上传

在开发过程中遇到需要上传大文件的需求，但是大文件整个上传会导致服务器内存爆炸。分片上传的思路利用[`blob.slice()`][blob.slice]方法，根据指

朱雀/ 2021年07月05日 01:12/ 0 赞/ 562 阅读

相关 .NET基于WebUploader大文件分片上传、断网续传、秒传

现在的项目开发基本上都用到了上传文件功能，或图片，或文档，或视频。我们常用的常规上传已经能够满足当前要求了，然而有时会出现如下问题： 1. 文件过大（比如1G以上），超

╰半橙微兮°/ 2021年06月26日 16:06/ 0 赞/ 426 阅读

相关基于WebUploader的图片上传

UploadController.cs using System; using System.Collections.Generic; using

秒速五厘米/ 2021年06月26日 16:06/ 0 赞/ 548 阅读