Springboot+百度的WebUploader组件实现普通文件的批量上传

àì夳堔傛蜴生んèń 2024-03-25 11:11 72阅读 0赞

## **WebUploader是什么？** ##

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。可以充分发挥HTML5的优势，同时沿用原来的FLASH运行时，可以兼容IE6+。对于大文件，又实现了大文件分片并发上传，极大提高了文件的上传效率。大的提高了文件上传效率

## **WebUploader的主要功能特性** ##

1、分片、并发

WebUploader与其他上传组件相比最突出的功能特性就是可以实现大文件的分片上传，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

2、预览、压缩

支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。

3、多途径添加文件

支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。

4、HTML5 & FLASH

兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。

5、MD5秒传

当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。

6、易扩展、可拆分

采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。采用AMD规范组织代码，清晰明了，方便高级玩家扩展。

## **Springboot+WebUploader文件批量上传** ##

1、在appplication.properties中配置文件上传相关参数，启用上传功能；设置单个文件大小最大限制；设置单次请求数据大小的最大限制；如果超过限制，则会发生异常；

#启用上传功能
    spring.servlet.multipart.enabled=true
    #设置单个文件大小最大限制
    spring.servlet.multipart.max-file-size=10MB
    #设置单次请求数据大小的最大限制
    spring.servlet.multipart.max-request-size=50MB

2、SpringMvc的文件上传，把上传文件保存在项目根目录下；

@PostMapping("/upload2")
    public String upload2(MultipartFile multipartFile) throws IOException {
        String userDir = System.getProperty("user.dir");
        File file = new File(userDir + File.separator + multipartFile.getOriginalFilename());
        multipartFile.transferTo(file);
        return "success";
    }

3、在resources目录下创建Springboot的静态资源目录static，在static目录下新建webuploader.html文件，详细代码如下：

*  引入jquery.js和webuploader.js，以及其他相关的一些样式文件；注意因为webuploader.js内部依赖了jquery，所以先引入jquery，再引入webuploader.js，顺序不能出错；

*  html部分主要由两个div组成，分别是用来显示上传文件信息和上传相关的按钮；

*  js部分主要也是两部分，

*  第一部分是使用WebUploader.create()，创建uploader对象，并设置一些参数，主要的参数如下：

dnd {Selector} [可选] [默认值：undefined] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
    disableGlobalDnd {Selector} [可选] [默认值：false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
    paste {Selector} [可选] [默认值：undefined] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
    pick {Selector, Object} [可选] [默认值：undefined] 指定选择文件的按钮容器，不指定则不创建按钮。
    id {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
    label {String} 请采用 
    innerHTML 代替
    innerHTML {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
    multiple {Boolean} 是否开起同时选择多个文件能力。
    accept {Arroy} [可选] [默认值：null] 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
    title {String} 文字描述
    extensions {String} 允许的文件后缀，不带点，多个用逗号分割。
    mimeTypes {String} 多个用逗号分割。
    auto {Boolean} [可选] [默认值：false] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
    runtimeOrder {Object} [可选] [默认值：html5,flash] 指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash.可以将此值设置成 flash，来强制使用 flash 运行时。
    prepareNextFile {Boolean} [可选] [默认值：false] 是否允许在文件传输时提前把下一个文件准备好。 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
    chunked {Boolean} [可选] [默认值：false] 是否要分片处理大文件上传。
    chunkSize {Boolean} [可选] [默认值：5242880] 如果要分片，分多大一片？ 默认大小为5M.
    chunkRetry {Boolean} [可选] [默认值：2] 如果某个分片由于网络问题出错，允许自动重传多少次？
    threads {Boolean} [可选] [默认值：3] 上传并发数。允许同时最大上传进程数。
    formData {Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数。
    fileVal {Object} [可选] [默认值：'file'] 设置文件上传域的name。
    method {Object} [可选] [默认值：'POST'] 文件上传方式，POST或者GET。
    sendAsBinary {Object} [可选] [默认值：false] 是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容， 其他参数在$_GET数组中。
    fileNumLimit {int} [可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列。
    fileSizeLimit {int} [可选] [默认值：undefined] 验证文件总大小是否超出限制, 超出则不允许加入队列。
    fileSingleSizeLimit {int} [可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。
    duplicate {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
    disableWidgets {String, Array} [可选] [默认值：undefined] 默认所有 Uploader.register 了的 widget 都会被加载，如果禁用某一部分，请通过此 option 指定黑名单。

*  第二部分是事件监听，分别是：

*  fileQueued：当文件被移除队列后触发，参数：File对象

*  uploadProgress：上传过程中触发，携带上传进度，参数：file \{File\}File对象，percentage \{Number\} 上传进度

*  uploadSuccess：当文件上传成功时触发，参数：file \{File\} File对象， response \{Object\} 服务端返回的数据

*  uploadError：当文件上传出错时触发，参数：file \{File\} File对象，reason \{String\} 出错的code

*  uploadComplete：不管成功或者失败，文件上传完成时触发，参数：file \{File\} \[可选\] File对象

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="http://localhost:8080/lib/webuploader.js"></script>
       
        <link rel="stylesheet" href="lib/style.css"></link>
        <link rel="stylesheet" href="lib/webuploader.css"></link>
        <link rel="stylesheet" href="lib/bootstrap.min.css"></link>
        <link rel="stylesheet" href="lib/bootstrap-theme.min.css"></link>
        <link rel="stylesheet" href="lib/font-awesome.min.css"></link>
    </head>
    <body>
    <div style="width: 60%">
        <div id="uploader" class="wu-example">
            
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker">选择文件</div>
                <button id="ctlBtn" class="btn btn-default">开始上传</button>
            </div>
        </div>
    </div>
    </body>
    <script type="text/javascript">
        var uploader = WebUploader.create({
            // swf文件路径
            swf: 'http://localhost:8080/lib/Uploader.swf',
            // 文件接收服务端。
            server: 'http://localhost:8080/file/upload2',
            // 选择文件的按钮。可选。
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            fileVal: 'multipartFile'//置文件上传域的name，用于后台接收文件的参数名称
            //,auto:true//设置为true，添加文件后自动上传
        });
    
        // 当有文件被添加进队列后触发
        uploader.on('fileQueued', function (file) {
            $('#thelist').append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }
            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');
        });
        //当文件上传成功时触发
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
        });
        //当文件上传出错时触发
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        //不管成功或者失败，文件上传完成时触发
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        //手动点击触发上传操作；
        $('#ctlBtn').click(function () {
            uploader.upload();
        })
    </script>
    </html>

## **效果** ##

![5908b21c4bea480eaea7d181978d0265.png][]

## **总结** ##

更多的API信息可移步[WebUploader官网][WebUploader]进行查看，前端引用的的js和css文件可移步这里下载[百度的WebUploader组件实现普通文件的批量上传示例相关的js和css][WebUploader_js_css]

[5908b21c4bea480eaea7d181978d0265.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ccf5af7f594b4b17a3694f0124dbb601.png
[WebUploader]: http://fex.baidu.com/webuploader/
[WebUploader_js_css]: https://download.csdn.net/download/fox9916/87571358